@axinom/mosaic-ui 0.55.0-rc.0 → 0.55.0-rc.10

package/src/components/FormElements/Tags/Tags.tsx

@@ -1,8 +1,9 @@
 import clsx from 'clsx';
 import React, {
-  FormEvent,
+  ChangeEvent,
   PropsWithChildren,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -10,13 +11,14 @@ import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { noop } from '../../../helpers/utils';
 import { Button, ButtonContext } from '../../Buttons';
 import { IconName } from '../../Icons';
-import { BaseFormControl, BaseSelectEvents } from '../Form.models';
+import { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
+import { Select, SelectOption } from '../Select/Select';
 import classes from './Tags.scss';
 
 export interface TagsProps<T = string>
   extends BaseFormControl,
-    BaseSelectEvents {
+    BaseInputEvents {
   /** If set, sets the form control value */
   value?: string[];
   /** Array of options that can be selected from */
@@ -52,33 +54,54 @@ export const Tags = <T,>({
 
   const [shouldAnimate, setShouldAnimate] = useState<boolean>(false);
 
-  const ref = useRef<FormEvent<HTMLSelectElement>>();
+  const ref = useRef<ChangeEvent<HTMLInputElement>>();
+
+  const transformedOptions: SelectOption[] = useMemo(() => {
+    return tagsOptions.map((option) => {
+      if (valueKey && displayKey) {
+        return {
+          value: String(option[valueKey]),
+          label: String(option[displayKey]),
+        };
+      }
+      return { value: String(option), label: String(option) };
+    });
+  }, [displayKey, tagsOptions, valueKey]);
+
+  const visibleOptions = useMemo(() => {
+    return transformedOptions.filter(
+      (option) => !currentTags.includes(String(option.value)),
+    );
+  }, [currentTags, transformedOptions]);
 
   useEffect(() => {
     setCurrentTags(value);
   }, [value]);
 
-  const errorMsg: string | undefined = error;
-
   useEffect(() => {
     // Only emit if there is a current event
     if (ref.current) {
       onChange({
         ...ref.current,
-
-        currentTarget: { value: currentTags as unknown as string },
-      } as React.FormEvent<HTMLSelectElement>);
+        target: {
+          ...ref.current.target,
+          value: currentTags as unknown as string,
+          name,
+          id,
+        },
+        currentTarget: { name, id, value: currentTags as unknown as string },
+      } as ChangeEvent<HTMLInputElement>);
 
       // Resets event data
       ref.current = undefined;
     }
-  }, [currentTags, onChange]);
+  }, [currentTags, id, name, onChange]);
 
   /**
    * Adds a tag to currently selected list
    * @param e Select FormEvent
    */
-  function addTag(e: FormEvent<HTMLSelectElement>): void {
+  function addTag(e: ChangeEvent<HTMLInputElement>): void {
     setShouldAnimate(true);
 
     const newTag = e.currentTarget.value;
@@ -96,7 +119,7 @@ export const Tags = <T,>({
    */
   function removeTag(idx: number, e: unknown): void {
     // Set event data
-    ref.current = e as FormEvent<HTMLSelectElement>;
+    ref.current = e as ChangeEvent<HTMLInputElement>;
 
     setCurrentTags((prevState) =>
       prevState.filter((_: string, i: number) => i !== idx),
@@ -119,59 +142,28 @@ export const Tags = <T,>({
     <FormElementContainer
       {...rest}
       className={clsx(classes.container, 'tags-container', className)}
-      error={errorMsg}
+      error={error}
       dataTestFieldType="Tags"
     >
       <div className={clsx(classes.tagsWrapper)}>
-        <select
-          className={clsx({ [classes.hasError]: errorMsg !== undefined })}
-          id={id}
-          name={name}
-          disabled={disabled}
-          autoFocus={autoFocus}
-          onBlur={onBlur}
-          onFocus={onFocus}
-          onChange={(e) => {
-            e.persist();
-            e.target?.blur();
-            addTag(e);
-          }}
-          hidden={currentTags.length === tagsOptions.length}
-        >
-          {[
-            <option key={'eae2713d-1a32-4bdb-8f87-c7e1f7e2a3b2'} value={''}>
-              {dropDownLabel}
-            </option>,
-          ].concat(
-            tagsOptions
-              .filter((currentTag: T) => {
-                if (typeof currentTag === 'string') {
-                  return !currentTags.includes(currentTag);
-                } else if (valueKey) {
-                  return !currentTags.includes(String(currentTag[valueKey]));
-                }
-              })
-              .map((option) => {
-                if (typeof option === 'string') {
-                  return (
-                    <option key={option} value={option}>
-                      {option}
-                    </option>
-                  );
-                } else if (valueKey && displayKey) {
-                  return (
-                    <option
-                      key={String(option[valueKey])}
-                      value={String(option[valueKey])}
-                    >
-                      {String(option[displayKey])}
-                    </option>
-                  );
-                }
-                return <></>;
-              }),
-          )}
-        </select>
+        {currentTags.length < tagsOptions.length ? (
+          <Select
+            id={id}
+            name={`tags-select-${name}`}
+            className={clsx({
+              [classes.hasError]: error !== undefined,
+            })}
+            options={visibleOptions}
+            onChange={addTag}
+            blurOnSelect
+            disabled={disabled}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            autoFocus={autoFocus}
+            inlineMode={true}
+            placeholder={dropDownLabel}
+          />
+        ) : null}
         <TransitionGroup component={null}>
           {currentTags.map((tag, idx) => (
             <CSSTransition

package/src/components/FormElements/Tags/TagsField.tsx

@@ -1,20 +1,10 @@
-import { useField } from 'formik';
 import React, { PropsWithChildren } from 'react';
 import { useFormikError } from '../useFormikError';
 import { Tags, TagsProps } from './Tags';
 export const TagsField = <T,>(
-  props: PropsWithChildren<Omit<TagsProps<T>, 'error' | 'onChange'>>,
+  props: PropsWithChildren<Omit<TagsProps<T>, 'error'>>,
 ): JSX.Element => {
-  const { name } = props;
-  const error = useFormikError(name);
-  const [field, , helpers] = useField(name);
+  const error = useFormikError(props.name);
 
-  return (
-    <Tags
-      {...props}
-      value={field.value}
-      error={error}
-      onChange={(e) => helpers.setValue(e.currentTarget.value)}
-    />
-  );
+  return <Tags {...props} error={error} />;
 };

package/src/styles/variables.scss

@@ -311,3 +311,11 @@ $context-button-hover-border-color: $blue;
 $context-button-active-color: $blue;
 $icon-button-stroke-color: $blue;
 $icon-button-hover-color: $blue;
+
+/* Autocomplete */
+$popper-border-color: $blue;
+$popper-trigger-button-color: $blue;
+$popper-background-color: $light-gray-2;
+$popper-item-font-size: 16px;
+$popper-text-color: $blue;
+$popper-background-selected-color: rgba($blue, 0.15);