@snack-uikit/fields 0.16.1 → 0.17.0

package/src/components/FieldSelect/FieldSelectSingle.tsx

@@ -1,17 +1,18 @@
 import mergeRefs from 'merge-refs';
-import { forwardRef, KeyboardEvent, KeyboardEventHandler, useEffect, useMemo, useRef, useState } from 'react';
+import { FocusEvent, forwardRef, KeyboardEvent, KeyboardEventHandler, useEffect, useMemo, useRef } from 'react';
 
 import { InputPrivate } from '@snack-uikit/input-private';
-import { Droplist, SelectionSingleValueType, useFuzzySearch } from '@snack-uikit/list';
+import { Droplist, ItemProps, 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 { extractSelectedOptions, getArrowIcon, transformOptionsToItems } from './utils';
+import { extractListProps, findSelectedOption, getArrowIcon, transformOptionsToItems } from './utils';
 
 export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleProps>(
   (
@@ -24,31 +25,26 @@ 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,
-      error,
+      addOptionByEnter = false,
+      open: openProp,
+      onOpenChange,
       ...rest
     },
     ref,
   ) => {
     const localRef = useRef<HTMLInputElement>(null);
-    const [open, setOpen] = useState<boolean>(false);
+    const [open = false, setOpen] = useValueControl<boolean>({ value: openProp, onChange: onOpenChange });
     const [value, setValue] = useValueControl<SelectionSingleValueType>({
       value: valueProp,
       defaultValue,
@@ -56,22 +52,34 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
     });
 
     const items = useMemo(() => transformOptionsToItems(options), [options]);
-    const selectedOption = useMemo(() => extractSelectedOptions(options, value), [options, value]);
+    const { selected, itemsWithPlaceholder } = useMemo(() => {
+      const [fonded, placeholder] = findSelectedOption(items, value);
+
+      return {
+        selected: fonded ?? placeholder,
+        itemsWithPlaceholder: ((placeholder ? [placeholder] : []) as ItemProps[]).concat(items),
+      };
+    }, [items, value]);
 
     const { inputValue, onInputValueChange, prevInputValue } = useSearchInput({
       ...search,
-      defaultValue: String(selectedOption ?? ''),
+      defaultValue: selected?.content.option ?? '',
     });
 
     useEffect(() => {
-      !open && onInputValueChange(String(selectedOption?.option ?? ''));
-    }, [onInputValueChange, open, selectedOption]);
+      if (selected?.content.option && prevInputValue.current !== selected?.content.option) {
+        onInputValueChange(selected.content.option);
+        prevInputValue.current = selected?.content.option;
+      }
+    }, [onInputValueChange, selected?.content.option, prevInputValue]);
 
-    useEffect(() => {
-      onInputValueChange(String(selectedOption?.option ?? ''));
+    const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
+      if (!open && selected?.content.option !== inputValue) {
+        onInputValueChange(selected?.content.option ?? '');
+      }
 
-      prevInputValue.current = String(selectedOption?.option ?? '');
-    }, [prevInputValue, onInputValueChange, selectedOption]);
+      rest?.onBlur?.(e);
+    };
 
     const onClear = () => {
       setValue('');
@@ -86,11 +94,11 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
     const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
       readonly,
       size,
-      showClearButton: showClearButton && Boolean(value),
+      showClearButton: showClearButton && !disabled && !readonly && Boolean(value),
       showCopyButton,
       inputRef: localRef,
       onClear,
-      valueToCopy: String(selectedOption?.option ?? ''),
+      valueToCopy: selected?.content.option ?? '',
     });
 
     const commonHandleOnKeyDown = useHandleOnKeyDown({
@@ -104,6 +112,15 @@ 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);
     };
 
@@ -119,37 +136,34 @@ 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(items);
-    const result = autocomplete ? items : fuzzySearch(prevInputValue.current !== inputValue ? inputValue : '');
+    const fuzzySearch = useFuzzySearch(itemsWithPlaceholder);
+    const result =
+      autocomplete || !searchable || prevInputValue.current === inputValue
+        ? itemsWithPlaceholder
+        : fuzzySearch(inputValue);
 
     return (
       <FieldDecorator
         {...extractSupportProps(rest)}
-        error={error}
+        {...extractFieldDecoratorProps(rest)}
+        validationState={validationState}
         required={required}
         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'
+          {...extractListProps(rest)}
           items={result}
-          triggerElemRef={localRef}
-          scroll
-          marker
-          footer={footer}
           selection={{
             mode: 'single',
             value: value,
@@ -158,7 +172,7 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
           size={size}
           open={open}
           onOpenChange={handleOpenChange}
-          loading={loading}
+          triggerElemRef={localRef}
         >
           {({ onKeyDown }) => (
             <FieldContainerPrivate
@@ -184,6 +198,7 @@ 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,13 +1,17 @@
 import { KeyboardEvent, KeyboardEventHandler, RefObject, useCallback, useMemo, useRef } from 'react';
-import { Handler, useUncontrolledProp } from 'uncontrollable';
+import { Handler } 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 {
+  extractChildIds,
+  isAccordionItemProps,
+  isNextListItemProps,
+  SelectionSingleValueType,
+} from '@snack-uikit/list';
 
-import { useCopyButton } from '../../hooks';
-import { OptionProps, SearchState } from './types';
-import { isAccordionOptionProps, isBaseOptionProps, isNextListOptionProps, transformOptionsToItems } from './utils';
+import { useCopyButton, useValueControl } from '../../hooks';
+import { ItemWithId, SearchState } from './types';
+import { isBaseOptionProps } from './utils';
 
 type UseHandleOnKeyDownProps = {
   inputKeyDownNavigationHandler: KeyboardEventHandler<HTMLInputElement>;
@@ -95,7 +99,7 @@ export function useButtons({
 }
 
 export function useSearchInput({ value, onChange, defaultValue }: SearchState) {
-  const [inputValue, onInputValueChange] = useUncontrolledProp<string>(value, defaultValue ?? '', onChange);
+  const [inputValue = '', onInputValueChange] = useValueControl<string>({ value, onChange, defaultValue });
 
   const prevInputValue = useRef<string>(inputValue);
 
@@ -104,20 +108,20 @@ export function useSearchInput({ value, onChange, defaultValue }: SearchState) {
 
 export function useHandleDeleteItem(setValue: Handler) {
   return useCallback(
-    (option?: OptionProps) => () => {
-      if (!option) {
+    (item?: ItemWithId) => () => {
+      if (!item) {
         return;
       }
 
-      if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
-        const removeIds = extractChildIds({ items: transformOptionsToItems(option.options) }).concat(option.value);
+      if (isAccordionItemProps(item) || isNextListItemProps(item)) {
+        const removeIds = extractChildIds({ items: item.items }).concat(item.id ?? '');
 
         setValue((value: SelectionSingleValueType[]) => value?.filter(v => !removeIds.includes(v ?? '')));
         return;
       }
 
-      if (isBaseOptionProps(option)) {
-        setValue((value: SelectionSingleValueType[]) => value?.filter(v => v !== option.value));
+      if (isBaseOptionProps(item)) {
+        setValue((value: SelectionSingleValueType[]) => value?.filter(v => v !== item.id));
       }
     },
     [setValue],

package/src/components/FieldSelect/types.ts

@@ -10,6 +10,7 @@ import {
   SelectionMultipleState,
   SelectionSingleState,
 } from '@snack-uikit/list';
+import { TagProps } from '@snack-uikit/tag';
 import { WithSupportProps } from '@snack-uikit/utils';
 
 import { FieldDecoratorProps } from '../FieldDecorator';
@@ -21,7 +22,7 @@ export type OptionProps = BaseOptionProps | AccordionOptionProps | GroupOptionPr
 export type OptionWithoutGroup = BaseOptionProps | AccordionOptionProps | NestListOptionProps;
 
 export type BaseOptionProps = Pick<BaseItemProps, 'beforeContent' | 'afterContent' | 'disabled'> &
-  BaseItemProps['content'] & { value: string | number };
+  BaseItemProps['content'] & { value: string | number } & Pick<TagProps, 'appearance'>;
 
 export type AccordionOptionProps = Pick<AccordionItemProps, 'type'> & BaseOptionProps & { options: OptionProps[] };
 export type GroupOptionProps = Omit<GroupItemProps, 'items' | 'id'> & { options: OptionProps[] };
@@ -78,17 +79,30 @@ 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 &
-  Omit<SelectionMultipleState, 'mode'> &
+export type FieldSelectMultipleProps = FieldSelectPrivateProps & { removeByBackspace?: boolean } & Omit<
+    SelectionMultipleState,
+    'mode'
+  > &
   Omit<FiledSelectCommonProps, 'showCopyButton'>;
 
 export type FieldSelectProps =
   | (FieldSelectSingleProps & { selection?: 'single' })
   | (FieldSelectMultipleProps & { selection: 'multiple' });
+
+export type ItemWithId = BaseItemProps | AccordionItemProps | NextListItemProps;

package/src/components/FieldSelect/utils.ts

@@ -1,16 +1,18 @@
 import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
 import { ICON_SIZE, SIZE, Size } from '@snack-uikit/input-private';
-import { ItemProps } from '@snack-uikit/list';
+import { DroplistProps, flattenItems, ItemProps, SelectionSingleValueType } from '@snack-uikit/list';
+import { TagProps } from '@snack-uikit/tag';
 
 import {
   AccordionOptionProps,
   BaseOptionProps,
   FieldSelectMultipleProps,
+  FieldSelectProps,
   FieldSelectSingleProps,
   GroupOptionProps,
+  ItemWithId,
   NestListOptionProps,
   OptionProps,
-  OptionWithoutGroup,
 } from './types';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -33,6 +35,34 @@ export function isGroupOptionProps(option: any): option is GroupOptionProps {
   return 'options' in option && option['type'] === undefined;
 }
 
+export function mapOptionToAppearance(
+  options: OptionProps[],
+): Record<string | number, TagProps['appearance'] | undefined> {
+  let mapOption2Appearance: Record<string | number, TagProps['appearance'] | undefined> = {};
+
+  options.forEach(option => {
+    if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
+      const { options, value, appearance } = option;
+
+      mapOption2Appearance = { ...mapOption2Appearance, [value]: appearance, ...mapOptionToAppearance(options) };
+    }
+
+    if (isGroupOptionProps(option)) {
+      const { options } = option;
+
+      mapOption2Appearance = { ...mapOption2Appearance, ...mapOptionToAppearance(options) };
+    }
+
+    const { value, appearance } = option as BaseOptionProps;
+
+    if (value !== undefined) {
+      mapOption2Appearance = { ...mapOption2Appearance, [value]: appearance };
+    }
+  });
+
+  return mapOption2Appearance;
+}
+
 export function transformOptionsToItems(options: OptionProps[]): ItemProps[] {
   return options.map(option => {
     if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
@@ -67,82 +97,49 @@ export function transformOptionsToItems(options: OptionProps[]): ItemProps[] {
   });
 }
 
-export function extractSelectedOptions(
-  options: OptionProps[],
-  value: string | number | undefined,
-): OptionWithoutGroup | undefined {
-  for (let i = 0; i < options.length; i++) {
-    const option = options[i];
-    if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
-      const { value: optionValue } = option;
-
-      if (optionValue === value) {
-        return option;
-      }
-
-      const selectedOptionFromNestedOptions = extractSelectedOptions(option.options, value);
-
-      if (selectedOptionFromNestedOptions) {
-        return selectedOptionFromNestedOptions;
-      }
-    }
+export function findSelectedOption(
+  items: ItemProps[],
+  value: SelectionSingleValueType,
+): [ItemWithId | undefined, ItemWithId | undefined] {
+  const flatten: ItemWithId[] = flattenItems(items);
 
-    if (isGroupOptionProps(option)) {
-      const selectedOptionFromNestedOptions = extractSelectedOptions(option.options, value);
-
-      if (selectedOptionFromNestedOptions) {
-        return selectedOptionFromNestedOptions;
-      }
-    }
-
-    if (isBaseOptionProps(option)) {
-      if (option.value === value) {
-        return option;
-      }
-    }
+  if (!value) {
+    return [undefined, undefined];
   }
 
-  return undefined;
-}
-
-export function extractSelectedMultipleOptions(
-  options: OptionProps[],
-  value?: (string | number | undefined)[],
-): OptionWithoutGroup[] | undefined {
-  let selectedOptions: OptionWithoutGroup[] = [];
+  const foundItem = flatten.find(item => String(item.id) === String(value));
+  const placeholderItem = { id: value, content: { option: String(value) } };
 
-  for (let i = 0; i < options.length; i++) {
-    const option = options[i];
-    if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
-      const { value: optionValue } = option;
-
-      if (value?.includes(optionValue)) {
-        selectedOptions.push(option);
-      }
+  return [foundItem, !foundItem ? placeholderItem : undefined];
+}
 
-      const selectedOptionFromNestedOptions = extractSelectedMultipleOptions(option.options, value);
+export function findSelectedOptions(
+  items: ItemProps[],
+  value: SelectionSingleValueType[] | undefined,
+): [ItemWithId[] | undefined, ItemWithId[] | undefined] {
+  const flatten: ItemWithId[] | undefined = flattenItems(items);
 
-      if (selectedOptionFromNestedOptions) {
-        selectedOptions = selectedOptions.concat(selectedOptionFromNestedOptions);
-      }
-    }
+  if (!value || !value?.length) {
+    return [undefined, undefined];
+  }
 
-    if (isGroupOptionProps(option)) {
-      const selectedOptionFromNestedOptions = extractSelectedMultipleOptions(option.options, value);
+  let foundItems: ItemWithId[] | undefined;
+  let placeholderItems: ItemWithId[] | undefined;
 
-      if (selectedOptionFromNestedOptions) {
-        selectedOptions = selectedOptions.concat(selectedOptionFromNestedOptions);
+  value.forEach(value => {
+    if (flatten) {
+      const [found, placeholder] = findSelectedOption(flatten, value);
+      if (found || foundItems) {
+        foundItems = (foundItems ?? []).concat(found ?? []);
       }
-    }
 
-    if (isBaseOptionProps(option)) {
-      if (value?.includes(option.value)) {
-        selectedOptions.push(option);
+      if (placeholder || placeholderItems) {
+        placeholderItems = (placeholderItems ?? []).concat(placeholder ?? []);
       }
     }
-  }
+  });
 
-  return selectedOptions.length ? selectedOptions : undefined;
+  return [foundItems, placeholderItems];
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -161,3 +158,30 @@ export function getArrowIcon({ size, open }: { size: Size; open: boolean }) {
     arrowIconSize: size === SIZE.S ? ICON_SIZE.Xs : ICON_SIZE.S,
   };
 }
+
+export function extractListProps({
+  dataError,
+  noDataState,
+  noResultsState,
+  errorDataState,
+  pinTop,
+  pinBottom,
+  dataFiltered,
+  loading,
+}: Partial<FieldSelectProps>): Partial<DroplistProps> {
+  return {
+    dataError,
+    noDataState,
+    noResultsState,
+    errorDataState,
+    pinTop,
+    pinBottom,
+    dataFiltered,
+    loading,
+    trigger: 'clickAndFocusVisible',
+    placement: 'bottom',
+    'data-test-id': 'field-select__list',
+    scroll: true,
+    marker: true,
+  };
+}

package/src/components/FieldSlider/helpers/generateAllowedValues.ts

@@ -3,7 +3,7 @@ export const generateAllowedValues = (min: number, max: number, step: number): n
 
   let current = min;
 
-  while (current < max) {
+  while (current <= max) {
     values.push(current);
     current += step;
   }

package/src/hooks/useValueControl.ts

@@ -7,7 +7,7 @@ type UseValueControl<TValue> = {
 };
 
 export function useValueControl<TValue>({ value, onChange, defaultValue }: UseValueControl<TValue>) {
-  return useUncontrolledProp<TValue>(value, value ?? defaultValue, (newValue: TValue) => {
+  return useUncontrolledProp<TValue>(value, defaultValue, (newValue: TValue) => {
     const newState = typeof newValue === 'function' ? newValue(value) : newValue;
 
     onChange?.(newState);