@snack-uikit/fields 0.16.1 → 0.17.0

package/dist/components/FieldSelect/utils.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
 import { ICON_SIZE, SIZE } from '@snack-uikit/input-private';
+import { flattenItems } from '@snack-uikit/list';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isBaseOptionProps(option) {
     return !('options' in option);
@@ -27,6 +28,24 @@ export function isNextListOptionProps(option) {
 export function isGroupOptionProps(option) {
     return 'options' in option && option['type'] === undefined;
 }
+export function mapOptionToAppearance(options) {
+    let mapOption2Appearance = {};
+    options.forEach(option => {
+        if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
+            const { options, value, appearance } = option;
+            mapOption2Appearance = Object.assign(Object.assign(Object.assign({}, mapOption2Appearance), { [value]: appearance }), mapOptionToAppearance(options));
+        }
+        if (isGroupOptionProps(option)) {
+            const { options } = option;
+            mapOption2Appearance = Object.assign(Object.assign({}, mapOption2Appearance), mapOptionToAppearance(options));
+        }
+        const { value, appearance } = option;
+        if (value !== undefined) {
+            mapOption2Appearance = Object.assign(Object.assign({}, mapOption2Appearance), { [value]: appearance });
+        }
+    });
+    return mapOption2Appearance;
+}
 export function transformOptionsToItems(options) {
     return options.map(option => {
         if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
@@ -41,60 +60,34 @@ export function transformOptionsToItems(options) {
         return Object.assign(Object.assign({ 'data-test-id': 'field-select__list-option-' + option.value }, rest), { id: value, content: { option: contentOption, caption, description } });
     });
 }
-export function extractSelectedOptions(options, value) {
-    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;
-            }
-        }
-        if (isGroupOptionProps(option)) {
-            const selectedOptionFromNestedOptions = extractSelectedOptions(option.options, value);
-            if (selectedOptionFromNestedOptions) {
-                return selectedOptionFromNestedOptions;
-            }
-        }
-        if (isBaseOptionProps(option)) {
-            if (option.value === value) {
-                return option;
-            }
-        }
+export function findSelectedOption(items, value) {
+    const flatten = flattenItems(items);
+    if (!value) {
+        return [undefined, undefined];
     }
-    return undefined;
+    const foundItem = flatten.find(item => String(item.id) === String(value));
+    const placeholderItem = { id: value, content: { option: String(value) } };
+    return [foundItem, !foundItem ? placeholderItem : undefined];
 }
-export function extractSelectedMultipleOptions(options, value) {
-    let selectedOptions = [];
-    for (let i = 0; i < options.length; i++) {
-        const option = options[i];
-        if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
-            const { value: optionValue } = option;
-            if (value === null || value === void 0 ? void 0 : value.includes(optionValue)) {
-                selectedOptions.push(option);
-            }
-            const selectedOptionFromNestedOptions = extractSelectedMultipleOptions(option.options, value);
-            if (selectedOptionFromNestedOptions) {
-                selectedOptions = selectedOptions.concat(selectedOptionFromNestedOptions);
-            }
-        }
-        if (isGroupOptionProps(option)) {
-            const selectedOptionFromNestedOptions = extractSelectedMultipleOptions(option.options, value);
-            if (selectedOptionFromNestedOptions) {
-                selectedOptions = selectedOptions.concat(selectedOptionFromNestedOptions);
+export function findSelectedOptions(items, value) {
+    const flatten = flattenItems(items);
+    if (!value || !(value === null || value === void 0 ? void 0 : value.length)) {
+        return [undefined, undefined];
+    }
+    let foundItems;
+    let placeholderItems;
+    value.forEach(value => {
+        if (flatten) {
+            const [found, placeholder] = findSelectedOption(flatten, value);
+            if (found || foundItems) {
+                foundItems = (foundItems !== null && foundItems !== void 0 ? foundItems : []).concat(found !== null && found !== void 0 ? found : []);
             }
-        }
-        if (isBaseOptionProps(option)) {
-            if (value === null || value === void 0 ? void 0 : value.includes(option.value)) {
-                selectedOptions.push(option);
+            if (placeholder || placeholderItems) {
+                placeholderItems = (placeholderItems !== null && placeholderItems !== void 0 ? placeholderItems : []).concat(placeholder !== null && placeholder !== void 0 ? placeholder : []);
             }
         }
-    }
-    return selectedOptions.length ? selectedOptions : undefined;
+    });
+    return [foundItems, placeholderItems];
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isFieldSelectMultipleProps(props) {
@@ -110,3 +103,20 @@ export function getArrowIcon({ size, open }) {
         arrowIconSize: size === SIZE.S ? ICON_SIZE.Xs : ICON_SIZE.S,
     };
 }
+export function extractListProps({ dataError, noDataState, noResultsState, errorDataState, pinTop, pinBottom, dataFiltered, loading, }) {
+    return {
+        dataError,
+        noDataState,
+        noResultsState,
+        errorDataState,
+        pinTop,
+        pinBottom,
+        dataFiltered,
+        loading,
+        trigger: 'clickAndFocusVisible',
+        placement: 'bottom',
+        'data-test-id': 'field-select__list',
+        scroll: true,
+        marker: true,
+    };
+}

package/dist/components/FieldSlider/helpers/generateAllowedValues.js

@@ -1,7 +1,7 @@
 export const generateAllowedValues = (min, max, step) => {
     const values = [];
     let current = min;
-    while (current < max) {
+    while (current <= max) {
         values.push(current);
         current += step;
     }

package/dist/hooks/useValueControl.js

@@ -1,6 +1,6 @@
 import { useUncontrolledProp } from 'uncontrollable';
 export function useValueControl({ value, onChange, defaultValue }) {
-    return useUncontrolledProp(value, value !== null && value !== void 0 ? value : defaultValue, (newValue) => {
+    return useUncontrolledProp(value, defaultValue, (newValue) => {
         const newState = typeof newValue === 'function' ? newValue(value) : newValue;
         onChange === null || onChange === void 0 ? void 0 : onChange(newState);
     });

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.16.1",
+  "version": "0.17.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -34,13 +34,13 @@
   "dependencies": {
     "@snack-uikit/button": "0.16.1",
     "@snack-uikit/calendar": "0.7.6",
-    "@snack-uikit/droplist": "0.13.8",
+    "@snack-uikit/droplist": "0.13.9",
     "@snack-uikit/icons": "0.20.1",
     "@snack-uikit/input-private": "3.1.1",
-    "@snack-uikit/list": "0.5.0",
+    "@snack-uikit/list": "0.6.0",
     "@snack-uikit/scroll": "0.5.2",
     "@snack-uikit/slider": "0.1.4",
-    "@snack-uikit/tag": "0.8.0",
+    "@snack-uikit/tag": "0.8.1",
     "@snack-uikit/tooltip": "0.12.1",
     "@snack-uikit/truncate-string": "0.4.9",
     "@snack-uikit/utils": "3.2.0",
@@ -56,5 +56,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "bfdd4a8e3c077eab0d45e177172a62b6dcbda06b"
+  "gitHead": "559f1542bf57e8a3be174390e4bd1f2b8f799946"
 }

package/src/components/FieldDecorator/utils.ts

@@ -0,0 +1,31 @@
+import { FieldDecoratorProps } from './FieldDecorator';
+
+export function extractFieldDecoratorProps<T extends Partial<FieldDecoratorProps>>({
+  error,
+  required,
+  readonly,
+  label,
+  labelTooltip,
+  labelTooltipPlacement,
+  labelFor,
+  hint,
+  disabled,
+  showHintIcon,
+  size,
+  validationState,
+}: T) {
+  return {
+    error,
+    required,
+    readonly,
+    label,
+    labelTooltip,
+    labelTooltipPlacement,
+    labelFor,
+    hint,
+    disabled,
+    showHintIcon,
+    size,
+    validationState,
+  };
+}

package/src/components/FieldSelect/FieldSelectMultiple.tsx

@@ -1,19 +1,26 @@
 import cn from 'classnames';
 import mergeRefs from 'merge-refs';
-import { FocusEvent, forwardRef, KeyboardEvent, KeyboardEventHandler, useMemo, useRef, useState } from 'react';
+import { FocusEvent, forwardRef, KeyboardEvent, KeyboardEventHandler, useMemo, useRef } from 'react';
 
 import { InputPrivate } from '@snack-uikit/input-private';
-import { Droplist, SelectionSingleValueType, useFuzzySearch } from '@snack-uikit/list';
+import { BaseItemProps, Droplist, ItemProps, 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 { extractSelectedMultipleOptions, getArrowIcon, transformOptionsToItems } from './utils';
+import { FieldSelectMultipleProps, ItemWithId } from './types';
+import {
+  extractListProps,
+  findSelectedOptions,
+  getArrowIcon,
+  mapOptionToAppearance,
+  transformOptionsToItems,
+} from './utils';
 
 const BASE_MIN_WIDTH = 4;
 
@@ -28,24 +35,19 @@ 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,
-      error,
+      removeByBackspace = false,
+      addOptionByEnter = false,
+      open: openProp,
+      onOpenChange,
       ...rest
     },
     ref,
@@ -54,39 +56,56 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
     const inputPlugRef = useRef<HTMLSpanElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);
 
-    const [open, setOpen] = useState<boolean>(false);
+    const [open = false, setOpen] = useValueControl<boolean>({ value: openProp, onChange: onOpenChange });
     const items = useMemo(() => transformOptionsToItems(options), [options]);
+    const mapItemsToTagAppearance = useMemo(() => mapOptionToAppearance(options), [options]);
+
     const [value, setValue] = useValueControl<SelectionSingleValueType[]>({
       value: valueProp,
       defaultValue,
       onChange: onChangeProp,
     });
 
-    const selectedOption = useMemo(() => {
-      const notSortSelectedOption = extractSelectedMultipleOptions(options, value);
+    const { selected, itemsWithPlaceholder, disabledSelected } = useMemo(() => {
+      const [notSortSelectedOption, placeholder] = findSelectedOptions(items, value);
 
-      if (notSortSelectedOption) {
-        return notSortSelectedOption.sort((a, b) => {
-          if (b.disabled && !a.disabled) {
-            return 1;
-          }
+      const selectedWithPlaceholder =
+        notSortSelectedOption || placeholder ? (placeholder ?? []).concat(notSortSelectedOption ?? []) : undefined;
 
-          if (a.disabled && !b.disabled) {
-            return -1;
-          }
+      const selected = selectedWithPlaceholder
+        ? selectedWithPlaceholder.sort((a, b) => {
+            if (b.disabled && !a.disabled) {
+              return 1;
+            }
 
-          return 0;
-        });
-      }
-    }, [options, value]);
+            if (a.disabled && !b.disabled) {
+              return -1;
+            }
+
+            return 0;
+          })
+        : undefined;
+
+      const placeholderItems: ItemProps[] = placeholder ? placeholder : [];
+
+      const disabledSelected = selected?.filter((item: ItemWithId) => item.disabled);
+
+      return {
+        selected,
+        disabledSelected,
+        itemsWithPlaceholder: placeholderItems.concat(items),
+      };
+    }, [items, value]);
 
     const { inputValue, onInputValueChange, prevInputValue } = useSearchInput({
       ...search,
-      defaultValue: String(selectedOption ?? ''),
+      defaultValue: '',
     });
 
     const onClear = () => {
-      setValue(undefined);
+      const disabledValues = disabledSelected?.map(item => item.id);
+
+      setValue(disabledValues);
       onInputValueChange('');
 
       localRef.current?.focus();
@@ -98,7 +117,8 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
     const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
       readonly,
       size,
-      showClearButton: showClearButton && Boolean(value),
+      showClearButton:
+        showClearButton && !disabled && !readonly && (value?.length ?? 0) > (disabledSelected?.length ?? 0),
       showCopyButton: false,
       inputRef: localRef,
       onClear,
@@ -112,12 +132,23 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
 
     const handleItemDelete = useHandleDeleteItem(setValue);
     const handleOnKeyDown = (onKeyDown?: KeyboardEventHandler<HTMLElement>) => (e: KeyboardEvent<HTMLInputElement>) => {
-      if (e.code === 'Backspace' && inputValue === '') {
-        if (selectedOption?.length && !selectedOption.slice(-1)[0].disabled) {
-          handleItemDelete(selectedOption.pop())();
+      if (removeByBackspace && e.code === 'Backspace' && inputValue === '') {
+        if (selected?.length && !selected.slice(-1)[0].disabled) {
+          handleItemDelete(selected.pop() as BaseItemProps)();
         }
       }
 
+      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);
       }
@@ -128,11 +159,19 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
     const handleOpenChange = (open: boolean) => {
       if (!readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
         setOpen(open);
+
         if (!open) {
-          prevInputValue.current = inputValue;
+          onInputValueChange('');
+          prevInputValue.current = '';
+          if (inputPlugRef.current) {
+            inputPlugRef.current.style.width = BASE_MIN_WIDTH + 'px';
+          }
         }
+
         if (open) {
-          prevInputValue.current = '';
+          if (inputPlugRef.current) {
+            inputPlugRef.current.style.width = 'unset';
+          }
         }
       }
     };
@@ -145,43 +184,33 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
       rest?.onBlur?.(e);
     };
 
-    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}
-        required={required}
-        readonly={readonly}
-        label={label}
-        labelTooltip={labelTooltip}
-        labelTooltipPlacement={labelTooltipPlacement}
+        {...extractFieldDecoratorProps(rest)}
         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: 'multiple',
             value: value,
             onChange: setValue,
           }}
+          dataFiltered={rest.dataFiltered ?? Boolean(inputValue.length)}
           size={size}
           open={!disabled && !readonly && open}
           onOpenChange={handleOpenChange}
-          loading={loading}
         >
           {({ onKeyDown }) => (
             <FieldContainerPrivate
@@ -197,14 +226,15 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
             >
               <>
                 <div className={styles.contentWrapper} ref={contentRef}>
-                  {selectedOption &&
-                    selectedOption.map(option => (
+                  {selected &&
+                    selected.map(option => (
                       <Tag
                         size={size === 'l' ? 's' : 'xs'}
                         tabIndex={-1}
-                        label={String(option.option)}
-                        key={option.value}
-                        onDelete={!option.disabled && !disabled ? handleItemDelete(option) : undefined}
+                        label={String(option.content.option)}
+                        key={option.id}
+                        appearance={option.id ? mapItemsToTagAppearance[option?.id] : 'neutral'}
+                        onDelete={!option.disabled && !disabled && !readonly ? handleItemDelete(option) : undefined}
                       />
                     ))}
 
@@ -224,7 +254,7 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
                       name={name}
                       type='text'
                       disabled={disabled}
-                      placeholder={!selectedOption ? placeholder : undefined}
+                      placeholder={!selected || !selected.length ? placeholder : undefined}
                       ref={mergeRefs(ref, localRef)}
                       onChange={searchable ? onInputValueChange : undefined}
                       value={searchable ? inputValue : ''}