@axinom/mosaic-ui 0.55.0-rc.1 → 0.55.0-rc.11

package/src/components/FormElements/Select/Select.tsx

@@ -1,73 +1,159 @@
+import { Popper, useAutocomplete, UseAutocompleteProps } from '@mui/base';
 import clsx from 'clsx';
-import React from 'react';
-import { BaseFormControl, BaseSelectEvents } from '../Form.models';
+import React, { ChangeEvent } from 'react';
+import { Button, ButtonContext } from '../../Buttons';
+import { IconName } from '../../Icons';
+import { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
 import classes from './Select.scss';
 
-export interface SelectProps extends BaseFormControl, BaseSelectEvents {
-  /** Current value the form control has */
-  value?: string | number | string[] | undefined;
-  /** Array of options that can be selected from */
-  options?: { value: string | number; label: string | number }[];
+export interface SelectOption {
+  value: string | number | string[];
+  label: string | number;
+}
+
+type TrimmedUseAutocompleteProps = Omit<
+  UseAutocompleteProps<SelectOption, false, true, false>,
+  'value' | 'onChange'
+>;
+export interface SelectProps
+  extends BaseFormControl,
+    BaseInputEvents,
+    TrimmedUseAutocompleteProps {
+  /** An array of options */
+  options: SelectOption[];
   /** Whether or not the control should start focused (default: false) */
   autoFocus?: boolean;
-  /** Defines whether an empty option should be added as the first option (default: false) */
-  addEmptyOption?: boolean;
+  /** Current value the form control has */
+  value?: string | string[] | number;
   /** Select placeholder */
   placeholder?: string;
+  /** Allows to clear the input field and leave empty  */
+  addEmptyOption?: boolean;
 }
 
-export const Select: React.FC<SelectProps> = ({
-  name,
-  id,
-  value = undefined,
-  options = [],
-  disabled = false,
-  error,
-  autoFocus = false,
-  addEmptyOption = false,
-  placeholder,
-  onChange,
-  onBlur,
-  onFocus,
-  className = '',
-  ...rest
-}) => {
-  const errorMsg: string | undefined = error;
+export const Select: React.FC<SelectProps> = (props) => {
+  const {
+    name,
+    error,
+    disabled,
+    id,
+    label,
+    className,
+    tooltipContent,
+    inlineMode,
+    autoFocus,
+    value,
+    onBlur,
+    onFocus,
+    onChange,
+    placeholder,
+    addEmptyOption,
+    ...autoCompleteProps
+  } = props;
+  const {
+    getRootProps,
+    getInputProps,
+    getListboxProps,
+    getOptionProps,
+    getPopupIndicatorProps,
+    groupedOptions,
+    popupOpen,
+    setAnchorEl,
+    anchorEl,
+  } = useAutocomplete({
+    id,
+    disabled,
+    value:
+      autoCompleteProps.options.find((option) => option.value === value) ??
+      null,
+    onChange: ({ target: _, ...event }, value) => {
+      onChange?.({
+        ...event,
+        currentTarget: {
+          ...event.currentTarget,
+          id,
+          name,
+          value: value?.value ?? '',
+        },
+      } as ChangeEvent<HTMLInputElement>);
+    },
+    disableClearable: !addEmptyOption,
+    ...autoCompleteProps,
+  });
 
   return (
     <FormElementContainer
-      {...rest}
+      id={id}
+      label={label}
+      tooltipContent={tooltipContent}
+      inlineMode={inlineMode}
       className={clsx(classes.container, 'select-container', className)}
-      error={errorMsg}
+      error={error}
       dataTestFieldType="Select"
     >
-      <select
-        className={clsx({ [classes.hasError]: errorMsg !== undefined })}
-        id={id}
-        name={name}
-        value={value}
-        disabled={disabled}
-        autoFocus={autoFocus}
-        onChange={onChange}
-        onBlur={onBlur}
-        onFocus={onFocus}
+      <div
+        ref={setAnchorEl}
+        {...getRootProps()}
+        className={clsx(classes.inputWrapper)}
       >
-        {addEmptyOption &&
-          (placeholder === null || placeholder === undefined) && (
-            <option value=""></option>
+        <input
+          {...getInputProps()}
+          name={name}
+          className={clsx({ [classes.hasError]: Boolean(error) })}
+          autoFocus={autoFocus}
+          onBlur={(event) => {
+            getInputProps().onBlur?.(event);
+            onBlur?.(event);
+          }}
+          onFocus={(event) => {
+            getInputProps().onFocus?.(event);
+            onFocus?.(event);
+          }}
+          placeholder={placeholder}
+        />
+        <Button
+          className={clsx(classes.button)}
+          buttonContext={ButtonContext.None}
+          icon={popupOpen ? IconName.ChevronUp : IconName.ChevronDown}
+          onButtonClicked={getPopupIndicatorProps().onClick}
+          onBlur={getPopupIndicatorProps().onBlur}
+          disabled={disabled}
+        />
+      </div>
+      <Popper
+        open={popupOpen}
+        anchorEl={anchorEl}
+        style={{
+          width: anchorEl ? anchorEl.clientWidth : undefined,
+          zIndex: 999,
+        }}
+      >
+        <PopperContent>
+          {groupedOptions.length > 0 && (
+            <ul {...getListboxProps()}>
+              {(groupedOptions as typeof autoCompleteProps.options).map(
+                (option, index) => (
+                  <li
+                    key={String(option.value)}
+                    {...getOptionProps({ option, index })}
+                  >
+                    {option.label}
+                  </li>
+                ),
+              )}
+            </ul>
           )}
-        {placeholder && (
-          <option value="" disabled>
-            {disabled ? '' : placeholder}
-          </option>
-        )}
-        {options.map((option) => (
-          <option key={option.value} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
+        </PopperContent>
+      </Popper>
     </FormElementContainer>
   );
 };
+
+const PopperContent: React.FC = ({ children }) => {
+  return (
+    <div className={clsx(classes.popperContent, 'select-popper-content')}>
+      {children}
+    </div>
+  );
+};

package/src/components/FormElements/Select/SelectField.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useFormikError } from '../useFormikError';
 import { Select, SelectProps } from './Select';
+
 export const SelectField: React.FC<Omit<SelectProps, 'error'>> = (props) => {
   const error = useFormikError(props.name);
   return <Select {...props} error={error} />;

package/src/components/FormElements/SingleLineText/SingleLineText.tsx

@@ -1,5 +1,10 @@
 import clsx from 'clsx';
-import React, { ChangeEvent, InputHTMLAttributes, useEffect } from 'react';
+import React, {
+  ChangeEvent,
+  InputHTMLAttributes,
+  useEffect,
+  useRef,
+} from 'react';
 import { executeIfRefAvailable } from '../../../helpers/utils';
 import { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';
@@ -50,7 +55,7 @@ export const SingleLineText: React.FC<SingleLineTextProps> = ({
   error,
   autoFocus = false,
   autoComplete,
-  innerRef = React.createRef(),
+  innerRef: refFromParent,
   defaultValue,
   onChange,
   onBlur,
@@ -59,9 +64,13 @@ export const SingleLineText: React.FC<SingleLineTextProps> = ({
   inputProps,
   ...rest
 }) => {
+  // Create a local ref if no ref is passed from the parent
+  const localRef = useRef<HTMLInputElement>(null);
+  const innerRef = refFromParent || localRef;
+
   const errorMsg: string | undefined = error;
   const DUMMY_PWD = '0000000000';
-  const isPasswordField = type === 'password' ? true : false;
+  const isPasswordField = type === 'password';
 
   useEffect(() => {
     if (innerRef.current) {
@@ -70,15 +79,22 @@ export const SingleLineText: React.FC<SingleLineTextProps> = ({
   }, [innerRef, value]);
 
   useEffect(() => {
-    if (isPasswordField && isSet) {
+    // Only set the dummy password if the field is a password field and the value is not set
+    // and the field is not focused
+    if (
+      isPasswordField &&
+      isSet &&
+      !value &&
+      document.activeElement !== innerRef.current
+    ) {
       executeIfRefAvailable(innerRef, (input) => {
         input.value = DUMMY_PWD;
       });
     }
-  }, [innerRef, isPasswordField, isSet]);
+  }, [innerRef, isPasswordField, isSet, value]);
 
   const onFocusWrapper = (e: ChangeEvent<HTMLInputElement>): void => {
-    if (type === 'password' && isSet && !value) {
+    if (isPasswordField && isSet && !value) {
       executeIfRefAvailable(innerRef, (input) => {
         input.value = '';
       });
@@ -86,7 +102,7 @@ export const SingleLineText: React.FC<SingleLineTextProps> = ({
     onFocus?.(e);
   };
   const onBlurWrapper = (e: ChangeEvent<HTMLInputElement>): void => {
-    if (type === 'password' && isSet && !value) {
+    if (isPasswordField && isSet && !value) {
       executeIfRefAvailable(innerRef, (input) => {
         input.value = DUMMY_PWD;
       });

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