@axinom/mosaic-ui 0.55.0-rc.5 → 0.55.0-rc.7

package/src/components/FormElements/Tags/Tags.scss

@@ -10,6 +10,22 @@
     flex-flow: wrap;
     gap: 10px;
 
+    .hasError {
+      input {
+        border: 1px solid
+          var(--input-invalid-border-color, $input-invalid-border-color);
+
+        &:hover {
+          border-color: var(
+            --input-invalid-border-color,
+            $input-invalid-border-color
+          );
+          box-shadow: 0 0 0 2px
+            var(--input-invalid-hover-color, $input-invalid-hover-color);
+        }
+      }
+    }
+
     .selectedItem {
       width: max-content;
       display: grid;
@@ -38,82 +54,6 @@
       display: block;
       grid-template-columns: none;
     }
-
-    select {
-      -moz-appearance: none;
-      -webkit-appearance: none;
-      appearance: none;
-
-      color: var(--input-color, $input-color);
-      border: 1px solid var(--input-border-color, $input-border-color);
-
-      font-size: var(--label-font-size, $label-font-size);
-
-      height: 50px;
-      max-width: $tags-max-width;
-
-      padding: 0 40px 0 12px;
-
-      // CSS variables will not work inside the background-image url - we still pass it in there for consistency reasons.
-      background-image: svg-arrow-glyph(
-        var(--select-arrow-color, encodecolor($select-arrow-color))
-      );
-      background-repeat: no-repeat;
-      background-position-y: center;
-      background-position-x: 100%;
-
-      background-color: var(
-        --select-background-color,
-        $select-background-color
-      );
-
-      cursor: pointer;
-      outline: none;
-
-      transition: box-shadow 0.15s ease-in-out 0s;
-
-      &.hasError {
-        border: 1px solid
-          var(--input-invalid-border-color, $input-invalid-border-color);
-      }
-
-      &:disabled {
-        border-color: var(
-          --input-disabled-border-color,
-          $input-disabled-border-color
-        );
-
-        cursor: default;
-
-        background-image: svg-arrow-glyph(
-          var(--select-arrow-color, encodecolor($select-disabled-arrow-color))
-        );
-        background-color: var(
-          --input-disabled-background-color,
-          $input-disabled-background-color
-        );
-      }
-    }
-
-    select,
-    option {
-      width: 325px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    select:hover:enabled {
-      border: 1px solid var(--input-hover-color, $input-hover-color);
-      box-shadow: 0 0 0 2px var(--input-hover-color, $input-hover-color);
-
-      &.hasError {
-        border: 1px solid
-          var(--input-invalid-border-color, $input-invalid-border-color);
-        box-shadow: 0 0 0 2px
-          var(--input-invalid-hover-color, $input-invalid-hover-color);
-      }
-    }
   }
 }
 

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

@@ -1,9 +1,16 @@
-import { mount, shallow } from 'enzyme';
+import { mount, ReactWrapper, shallow } from 'enzyme';
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import { Button } from '../../Buttons';
+import { Select } from '../Select/Select';
 import { Tags } from './Tags';
 
+function selectFirstOption(wrapper: ReactWrapper) {
+  const input = wrapper.find('[role="combobox"]');
+  input.simulate('mousedown');
+  const firstOption = document.querySelector('[role="option"]');
+  firstOption?.dispatchEvent(new Event('click', { bubbles: true }));
+}
+
 describe('Tags', () => {
   it('renders the component without crashing', () => {
     const wrapper = shallow(<Tags name={'test-name'} />);
@@ -41,61 +48,54 @@ describe('Tags', () => {
     });
   });
 
-  it('raises onChange when selecting a tag along with the new value', async () => {
-    const spy = jest.fn();
+  it('raises onChange when selecting a tag along with the new value', () => {
+    const changeSpy = jest.fn();
     const mockValue: string[] = ['1'];
-    const mockValueUpdated = '2';
     const wrapper = mount(
-      <Tags name={'test-name'} onChange={spy} value={mockValue} />,
+      <Tags
+        name={'test-name'}
+        onChange={changeSpy}
+        value={mockValue}
+        tagsOptions={['1', '2']}
+      />,
     );
 
-    const select = wrapper.find('select');
-
-    await act(async () => {
-      await select.simulate('change', {
-        currentTarget: { value: mockValueUpdated },
-        persist: jest.fn(),
-      });
-      wrapper.update();
-    });
+    selectFirstOption(wrapper);
 
-    expect(spy).toHaveBeenCalledTimes(1);
-    // Test is only failing due to a bug with jasmine: https://github.com/jasmine/jasmine/issues/652
-    // Objects do match, commenting it out for now.
-    // expect(spy).toHaveBeenCalledWith({
-    //   currentTarget: { value: [...mockValue, mockValueUpdated] },
-    //   persist: jest.fn(),
-    // });
+    expect(changeSpy).toHaveBeenCalledTimes(1);
+    expect(changeSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        currentTarget: expect.objectContaining({ value: ['1', '2'] }),
+      }),
+    );
   });
 
-  it('raises onChange when removing a tag along with the new value', async () => {
-    const spy = jest.fn();
+  it('raises onChange when removing a tag along with the new value', () => {
+    const changeSpy = jest.fn();
     const mockValue: string[] = ['1'];
     const wrapper = mount(
       <Tags
         name={'test-name'}
-        onChange={spy}
+        onChange={changeSpy}
         value={mockValue}
         tagsOptions={['1', '2']}
       />,
     );
 
-    const x = wrapper.find('svg');
+    const x = wrapper.find('[data-test-id="tags-delete"]');
 
-    await act(async () => {
-      await x.simulate('click', {
-        persist: jest.fn(),
-      });
-      wrapper.update();
+    x.simulate('click', {
+      persist: jest.fn(),
     });
 
-    expect(spy).toHaveBeenCalledTimes(1);
-    // Test is only failing due to a bug with jasmine: https://github.com/jasmine/jasmine/issues/652
-    // Objects do match, commenting it out for now.
-    // expect(spy).toHaveBeenCalledWith({
-    //   currentTarget: { value: mockValueUpdated },
-    //   persist: jest.fn(),
-    // });
+    wrapper.update();
+
+    expect(changeSpy).toHaveBeenCalledTimes(1);
+    expect(changeSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        currentTarget: expect.objectContaining({ value: [] }),
+      }),
+    );
   });
 
   it('shows select element when current selected tags and optional tags are the not same length', () => {
@@ -103,37 +103,38 @@ describe('Tags', () => {
       <Tags name={'test-name'} value={['1']} tagsOptions={['1', '2']} />,
     );
 
-    const select = wrapper.find('select');
+    const select = wrapper.find(Select);
 
-    expect(select.prop('hidden')).toBe(false);
+    expect(select).toHaveLength(1);
   });
 
   it('hides select element when current selected tags and optional tags are the same length', () => {
-    const wrapper = shallow(
+    const wrapper = mount(
       <Tags name={'test-name'} value={['1']} tagsOptions={['1', '2']} />,
     );
 
-    let select = wrapper.find('select');
+    selectFirstOption(wrapper);
 
-    expect(select.prop('hidden')).toBe(false);
+    wrapper.update();
 
-    select.simulate('change', {
-      currentTarget: { value: '2' },
-      persist: jest.fn(),
-    });
-    select = wrapper.find('select');
+    const select = wrapper.find(Select);
 
-    expect(select.prop('hidden')).toBe(true);
+    expect(select).toHaveLength(0);
   });
 
   it('raises blur and focus events', () => {
     const blurSpy = jest.fn();
     const focusSpy = jest.fn();
     const wrapper = shallow(
-      <Tags name={'test-name'} onBlur={blurSpy} onFocus={focusSpy} />,
+      <Tags
+        name={'test-name'}
+        onBlur={blurSpy}
+        onFocus={focusSpy}
+        tagsOptions={['1']}
+      />,
     );
 
-    const select = wrapper.find('select');
+    const select = wrapper.find(Select);
 
     select.simulate('blur');
     expect(blurSpy).toHaveBeenCalledTimes(1);
@@ -166,7 +167,7 @@ describe('Tags', () => {
   });
 
   it('uses the displayValue for available tags when tagOptions are objects', () => {
-    const wrapper = shallow(
+    const wrapper = mount(
       <Tags
         name={'test-name'}
         value={['1', '3']}
@@ -181,43 +182,31 @@ describe('Tags', () => {
       />,
     );
 
-    const tags = wrapper.find('option').map((node) => node.text());
+    const input = wrapper.find('[role="combobox"]');
+    input.simulate('mousedown');
 
-    expect(tags).toHaveLength(3);
+    const popper = document.querySelector('[role="tooltip"]');
+
+    const options = popper?.querySelectorAll('[role="option"]');
+
+    expect(options).toHaveLength(2);
 
-    expect(tags).toEqual(['', 'Test2', 'Test4']);
+    expect([options?.[0].innerHTML, options?.[1].innerHTML]).toEqual([
+      'Test2',
+      'Test4',
+    ]);
   });
 
   it('applies error styling and renders error message when an error is passed', () => {
     const mockErrorMessage = 'test-error-message';
-    const wrapper = shallow(
-      <Tags name={'test-name'} error={mockErrorMessage} />,
+    const wrapper = mount(
+      <Tags name={'test-name'} error={mockErrorMessage} tagsOptions={['1']} />,
     );
 
-    const errorMsg = wrapper.dive().find('small');
-    const errorStyling = wrapper.find('select');
+    const errorMsg = wrapper.find('small');
+    const select = wrapper.find(Select);
 
     expect(errorMsg.text()).toBe(mockErrorMessage);
-    expect(errorStyling.hasClass('hasError')).toBe(true);
-  });
-
-  it('defaults drop down label and value to empty strings', () => {
-    const wrapper = shallow(<Tags name={'test-name'} />);
-
-    const options = wrapper.find('option');
-
-    expect(options.at(0).text()).toBe('');
-    expect(options.at(0).prop('value')).toBe('');
-  });
-
-  it('displays a label for the drop down', () => {
-    const mockDropDownLabel = 'mockLabel';
-    const wrapper = shallow(
-      <Tags name={'test-name'} dropDownLabel={mockDropDownLabel} />,
-    );
-
-    const options = wrapper.find('option');
-
-    expect(options.at(0).text()).toBe(mockDropDownLabel);
+    expect(select.hasClass('hasError')).toBe(true);
   });
 });

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);