@snack-uikit/fields 0.14.2 → 0.15.0

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

@@ -5,17 +5,17 @@ $sizes: 's', 'm', 'l';
 $header-typography: (
   's': $sans-label-m,
   'm': $sans-label-l,
-  'l': $sans-label-l
+  'l': $sans-label-l,
 );
 $footer-typography: (
   's': $sans-body-s,
   'm': $sans-body-m,
-  'l': $sans-body-m
+  'l': $sans-body-m,
 );
 $hint-icon-container: (
   's': $fields-hint-icon-container-s,
   'm': $fields-hint-icon-container-m,
-  'l': $fields-hint-icon-container-m
+  'l': $fields-hint-icon-container-m,
 );
 
 .decorator {
@@ -57,8 +57,9 @@ $hint-icon-container: (
 }
 
 .footer {
+  @include composite-var($fields-hint-container);
+
   display: flex;
-  gap: $dimension-050m;
   justify-content: space-between;
   box-sizing: border-box;
 
@@ -97,19 +98,19 @@ $hint-icon-container: (
   display: grid;
   flex-grow: 1;
 
-  &[data-validation="default"] {
+  &[data-validation='default'] {
     color: simple-var($sys-neutral-text-light);
   }
 
-  &[data-validation="error"] {
+  &[data-validation='error'] {
     color: simple-var($sys-red-text-main);
   }
 
-  &[data-validation="warning"] {
+  &[data-validation='warning'] {
     color: simple-var($sys-yellow-text-main);
   }
 
-  &[data-validation="success"] {
+  &[data-validation='success'] {
     color: simple-var($sys-green-text-main);
   }
 }
@@ -124,58 +125,65 @@ $hint-icon-container: (
   flex-shrink: 0;
   box-sizing: content-box;
 
-  &[data-validation="default"] {
+  &[data-validation='default'] {
     color: simple-var($sys-neutral-text-light);
   }
 
-  &[data-validation="error"] {
+  &[data-validation='error'] {
     color: simple-var($sys-red-accent-default);
   }
 
-  &[data-validation="warning"] {
+  &[data-validation='warning'] {
     color: simple-var($sys-yellow-accent-default);
   }
 
-  &[data-validation="success"] {
+  &[data-validation='success'] {
     color: simple-var($sys-green-accent-default);
   }
 }
 
 .counterLimit {
   > span {
-  &[data-validation="default"] {
-    color: simple-var($sys-neutral-text-light);
-  }
+    &[data-validation='default'] {
+      color: simple-var($sys-neutral-text-light);
+    }
 
-  &[data-limit-exceeded],
-  &[data-validation="error"] {
-    color: simple-var($sys-red-text-light);
-  }
+    &[data-limit-exceeded],
+    &[data-validation='error'] {
+      color: simple-var($sys-red-text-light);
+    }
 
-  &[data-validation="warning"] {
-    color: simple-var($sys-yellow-text-light);
-  }
+    &[data-validation='warning'] {
+      color: simple-var($sys-yellow-text-light);
+    }
 
-  &[data-validation="success"] {
-    color: simple-var($sys-green-text-light);
-  }}
+    &[data-validation='success'] {
+      color: simple-var($sys-green-text-light);
+    }
+  }
 }
 
 .counterCurrentValue {
   &[data-limit-exceeded] {
-    &[data-validation="default"] {
+    &[data-validation='default'] {
       color: simple-var($sys-neutral-text-main);
     }
-    &[data-validation="error"] {
+    &[data-validation='error'] {
       color: simple-var($sys-red-text-main);
     }
 
-    &[data-validation="warning"] {
+    &[data-validation='warning'] {
       color: simple-var($sys-yellow-text-main);
     }
 
-    &[data-validation="success"] {
+    &[data-validation='success'] {
       color: simple-var($sys-green-text-light);
     }
   }
-}
+}
+
+.labelTooltipTrigger {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}

package/src/components/FieldSelect/FieldSelect.tsx

@@ -1,26 +1,18 @@
 import { forwardRef } from 'react';
 
-import { SELECTION_MODE } from './constants';
-import { FieldSelectMulti } from './FieldSelectMulti';
+import { FieldSelectMultiple } from './FieldSelectMultiple';
 import { FieldSelectSingle } from './FieldSelectSingle';
-import { FieldSelectMultiProps, FieldSelectSingleProps } from './types';
+import { FieldSelectProps } from './types';
+import { isFieldSelectMultipleProps, isFieldSelectSingleProps } from './utils';
 
-export type FieldSelectProps =
-  | ({
-      selectionMode?: typeof SELECTION_MODE.Single;
-    } & FieldSelectSingleProps)
-  | ({
-      selectionMode: typeof SELECTION_MODE.Multi;
-    } & FieldSelectMultiProps);
+export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>((props, ref) => {
+  if (isFieldSelectMultipleProps(props)) {
+    return <FieldSelectMultiple {...props} ref={ref} />;
+  }
 
-export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(
-  ({ selectionMode = SELECTION_MODE.Single, ...props }, ref) => {
-    switch (selectionMode) {
-      case SELECTION_MODE.Multi:
-        return <FieldSelectMulti {...(props as FieldSelectMultiProps)} ref={ref} />;
-      case SELECTION_MODE.Single:
-      default:
-        return <FieldSelectSingle {...(props as FieldSelectSingleProps)} ref={ref} />;
-    }
-  },
-);
+  if (isFieldSelectSingleProps(props)) {
+    return <FieldSelectSingle {...props} ref={ref} />;
+  }
+
+  return null;
+});

package/src/components/FieldSelect/FieldSelectMultiple.tsx

@@ -0,0 +1,255 @@
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import { FocusEvent, forwardRef, KeyboardEvent, KeyboardEventHandler, useMemo, useRef, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { InputPrivate } from '@snack-uikit/input-private';
+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 { FieldDecorator } from '../FieldDecorator';
+import { useButtons, useHandleDeleteItem, useHandleOnKeyDown, useSearchInput } from './hooks';
+import styles from './styles.module.scss';
+import { FieldSelectMultipleProps } from './types';
+import { extractSelectedMultipleOptions, getArrowIcon, transformOptionsToItems } from './utils';
+
+const BASE_MIN_WIDTH = 4;
+
+export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMultipleProps>(
+  (
+    {
+      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,
+      hint,
+      showHintIcon,
+      validationState = 'default',
+      footer,
+      search,
+      autocomplete = false,
+      prefixIcon,
+      ...rest
+    },
+    ref,
+  ) => {
+    const localRef = useRef<HTMLInputElement>(null);
+    const inputPlugRef = useRef<HTMLSpanElement>(null);
+    const contentRef = useRef<HTMLDivElement>(null);
+
+    const [open, setOpen] = useState<boolean>(false);
+    const items = useMemo(() => transformOptionsToItems(options), [options]);
+    const [value, setValue] = useUncontrolledProp<SelectionSingleValueType[] | undefined>(
+      valueProp,
+      defaultValue,
+      onChangeProp,
+    );
+
+    const selectedOption = useMemo(() => {
+      const notSortSelectedOption = extractSelectedMultipleOptions(options, value);
+
+      if (notSortSelectedOption) {
+        return notSortSelectedOption.sort((a, b) => {
+          if (b.disabled && !a.disabled) {
+            return 1;
+          }
+
+          if (a.disabled && !b.disabled) {
+            return -1;
+          }
+
+          return 0;
+        });
+      }
+    }, [options, value]);
+
+    const { inputValue, onInputValueChange, prevInputValue } = useSearchInput({
+      ...search,
+      defaultValue: String(selectedOption ?? ''),
+    });
+
+    const onClear = () => {
+      setValue(undefined);
+      onInputValueChange('');
+
+      localRef.current?.focus();
+      setOpen(true);
+    };
+
+    const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open });
+
+    const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
+      readonly,
+      size,
+      showClearButton: showClearButton && Boolean(value),
+      showCopyButton,
+      inputRef: localRef,
+      onClear,
+      valueToCopy: String(selectedOption?.map(option => option.option).join(', ') ?? ''),
+    });
+
+    const commonHandleOnKeyDown = useHandleOnKeyDown({
+      inputKeyDownNavigationHandler,
+      onInputKeyDownProp,
+      setOpen,
+    });
+
+    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 (!open && prevInputValue.current !== inputValue) {
+        setOpen(true);
+      }
+
+      commonHandleOnKeyDown(onKeyDown)(e);
+    };
+
+    const handleOpenChange = (open: boolean) => {
+      if (!readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
+        setOpen(open);
+        if (!open) {
+          prevInputValue.current = inputValue;
+        }
+        if (open) {
+          prevInputValue.current = '';
+        }
+      }
+    };
+
+    const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
+      if (!open) {
+        onInputValueChange('');
+      }
+
+      rest?.onBlur?.(e);
+    };
+
+    const fuzzySearch = useFuzzySearch(items);
+    const result = autocomplete ? items : fuzzySearch(prevInputValue.current !== inputValue ? inputValue : '');
+
+    return (
+      <FieldDecorator
+        {...extractSupportProps(rest)}
+        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'
+          items={result}
+          triggerElemRef={localRef}
+          scroll
+          marker
+          footer={footer}
+          selection={{
+            mode: 'multiple',
+            value: value,
+            onChange: setValue,
+          }}
+          size={size}
+          open={!disabled && !readonly && open}
+          onOpenChange={handleOpenChange}
+          loading={loading}
+        >
+          {({ onKeyDown }) => (
+            <FieldContainerPrivate
+              className={cn(styles.container, styles.tagContainer)}
+              validationState={validationState}
+              disabled={disabled}
+              readonly={readonly}
+              focused={open}
+              variant='single-line-container'
+              inputRef={localRef}
+              size={size}
+              prefix={prefixIcon}
+            >
+              <>
+                <div className={styles.contentWrapper} ref={contentRef}>
+                  {selectedOption &&
+                    selectedOption.map(option => (
+                      <Tag
+                        size={size === 'l' ? 's' : 'xs'}
+                        tabIndex={-1}
+                        label={String(option.option)}
+                        key={option.value}
+                        onDelete={!option.disabled ? handleItemDelete(option) : undefined}
+                      />
+                    ))}
+
+                  <div
+                    className={styles.inputWrapper}
+                    style={{
+                      minWidth: value
+                        ? Math.min(
+                            contentRef.current?.clientWidth ?? BASE_MIN_WIDTH,
+                            inputPlugRef.current?.clientWidth ?? BASE_MIN_WIDTH,
+                          )
+                        : '100%',
+                    }}
+                  >
+                    <InputPrivate
+                      id={id}
+                      name={name}
+                      type='text'
+                      disabled={disabled}
+                      placeholder={!selectedOption ? placeholder : undefined}
+                      ref={mergeRefs(ref, localRef)}
+                      onChange={searchable ? onInputValueChange : undefined}
+                      value={searchable ? inputValue : ''}
+                      readonly={!searchable || readonly}
+                      data-test-id='field-select__input'
+                      onKeyDown={handleOnKeyDown(onKeyDown)}
+                      onBlur={handleBlur}
+                      className={styles.input}
+                    />
+                  </div>
+                </div>
+
+                <div className={styles.postfix}>
+                  {buttons}
+                  <ArrowIcon size={arrowIconSize} className={styles.arrowIcon} />
+                </div>
+
+                <span ref={inputPlugRef} className={styles.inputPlug}>
+                  {inputValue}
+                </span>
+              </>
+            </FieldContainerPrivate>
+          )}
+        </Droplist>
+      </FieldDecorator>
+    );
+  },
+);