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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.55.0-rc.5",
+  "version": "0.55.0-rc.6",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,9 +32,10 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.28-rc.5",
+    "@axinom/mosaic-core": "^0.4.28-rc.6",
     "@faker-js/faker": "^7.4.0",
     "@geoffcox/react-splitter": "^2.1.2",
+    "@mui/base": "5.0.0-beta.40",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
     "lodash": "^4.17.21",
@@ -106,5 +107,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e689e0f8c19bbca2a3aeddaab18f3ebf3d7b0e1b"
+  "gitHead": "1f58b4dfda36f87d416466b789e9372c0216a1c4"
 }

package/src/components/DynamicDataList/DynamicListDataEntry/Renderers/createSelectRenderer/createSelectRenderer.spec.tsx

@@ -44,12 +44,17 @@ describe('createSelectRenderer', () => {
   });
 
   it(`sets 'select' value to current value`, () => {
-    const mockValue = 'test-value';
-    const wrapper = mount(<RendererWrapper currentValue={mockValue} />);
+    const mockOptions = [{ value: 'test-value', label: 'Test Value' }];
+    const wrapper = mount(
+      <RendererWrapper
+        currentValue={mockOptions[0].value}
+        options={mockOptions}
+      />,
+    );
 
-    const select = wrapper.find('select');
+    const input = wrapper.find('[role="combobox"]');
 
-    expect(select.prop('value')).toBe(mockValue);
+    expect(input.prop('value')).toBe(mockOptions[0].label);
   });
 
   it(`emits 'onValueChange' with the new value when a new option has been selected`, () => {

package/src/components/DynamicDataList/DynamicListDataEntry/Renderers/createSelectRenderer/createSelectRenderer.tsx

@@ -1,4 +1,4 @@
-import React, { FormEvent } from 'react';
+import React, { ChangeEvent } from 'react';
 import { DynamicListDataEntryRenderer } from '../../../../DynamicDataList/DynamicDataList.model';
 import { Select } from '../../../../FormElements';
 import { CreateSelectRendererConfig } from '../renderers.model';
@@ -33,7 +33,7 @@ export const createSelectRenderer = ({
       onValueChange(defaultValue);
     }
 
-    const onChangeHandler = (e: FormEvent<HTMLSelectElement>): void => {
+    const onChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
       onValueChange(transform(e.currentTarget.value)); // emit onChange with transformed value
     };
 

package/src/components/FormElements/Select/Select.scss

@@ -1,79 +1,128 @@
 @import '../../../styles/common.scss';
 
-@function svg-arrow-glyph($color) {
-  @return url('data:image/svg+xml;utf8,<svg stroke="' + $color + '" version="1.1" xmlns="http://www.w3.org/2000/svg" width="40px" height="20px" viewBox="0 0 40 40"><path vector-effect="non-scaling-stroke" fill="none" stroke-width="2" d="M38.5,9.5L20,30.5L1.5,9.5" /></svg>');
-}
-
 .container {
-  select {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-    cursor: pointer;
-    color: var(--input-color, $input-color);
-    border: 1px solid var(--input-border-color, $input-border-color);
-    width: max-content;
-    outline: none;
-    font-size: var(--label-font-size, $label-font-size);
-    max-width: $select-max-width;
+  .inputWrapper {
+    position: relative;
+    max-width: var(--input-max-width, $input-max-width);
 
-    // 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%;
+    .button {
+      position: absolute;
+      right: 0;
+      top: 0;
 
-    background-color: var(--select-background-color, $select-background-color);
+      svg {
+        height: 50%;
+        * {
+          stroke: var(
+            --popper-trigger-button-color,
+            $popper-trigger-button-color
+          );
+        }
+      }
 
-    height: 50px;
+      &:disabled {
+        svg * {
+          stroke: var(--select-arrow-color, $select-disabled-arrow-color);
+        }
+      }
+    }
 
-    padding: 0 40px 0 12px;
+    input {
+      color: var(--input-color, $input-color);
+      border: 1px solid var(--input-border-color, $input-border-color);
+      padding: 0 48px 0 12px;
+      display: inline-block;
+      font-size: var(--label-font-size, $label-font-size);
+      outline: none;
+      height: 50px;
+      width: 100%;
+      transition: box-shadow 0.15s ease-in-out 0s;
 
-    transition: box-shadow 0.15s ease-in-out 0s;
+      &::placeholder {
+        color: var(--input-placeholder-color, $input-placeholder-color);
+      }
 
-    &.hasError {
-      border: 1px solid
-        var(--input-invalid-border-color, $input-invalid-border-color);
-    }
+      &.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
-      );
+      &:disabled {
+        background-color: var(
+          --input-disabled-background-color,
+          $input-disabled-background-color
+        );
+        color: var(--input-disabled-font-color, $input-disabled-font-color);
+        border-color: var(
+          --input-disabled-border-color,
+          $input-disabled-border-color
+        );
+      }
 
-      cursor: default;
+      &:hover:enabled,
+      &:focus {
+        border-color: var(--input-hover-color, $input-hover-color);
+        box-shadow: 0 0 0 2px var(--input-hover-color, $input-hover-color);
 
-      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
-      );
+        &.hasError {
+          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);
+        }
+
+        &:disabled {
+          border-color: var(
+            --input-disabled-border-color,
+            $input-disabled-border-color
+          );
+          box-shadow: none;
+        }
+      }
     }
   }
+}
 
-  select,
-  option {
-    width: 325px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
+.popperContent {
+  ul {
+    display: grid;
+    row-gap: 1px;
+    background-color: var(--popper-background-color, $popper-background-color);
+    padding: 0px;
+    margin-top: 1px;
+    margin-bottom: 1px;
+    border: 1px solid var(--popper-border-color, $popper-border-color);
+    overflow-y: auto;
+    max-height: 509px;
+
+    li {
+      display: grid;
+      place-items: center left;
+      height: 50px;
+      font-size: var(--popper-item-font-size, $popper-item-font-size);
+      color: var(--popper-text-color, $popper-text-color);
+      background-color: white;
+      padding: 0 12px;
+      list-style: none;
+      cursor: default;
 
-  select:hover:enabled,
-  select:focus:enabled {
-    border: 1px solid var(--input-hover-color, $input-hover-color);
-    box-shadow: 0 0 0 2px var(--input-hover-color, $input-hover-color);
+      &:hover {
+        cursor: pointer;
+        background-color: var(
+          --popper-background-selected-color,
+          $popper-background-selected-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);
+      &[aria-selected='true'],
+      &[class='Mui-focused Mui-focusVisible'] {
+        background-color: var(
+          --popper-background-selected-color,
+          $popper-background-selected-color
+        );
+      }
     }
   }
 }

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

@@ -1,95 +1,104 @@
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { Select } from './Select';
 
+const mockLabel = 'mockLabel';
+
+const mockOptions = [
+  {
+    value: '1',
+    label: 'One',
+  },
+  {
+    value: '2',
+    label: 'Two',
+  },
+  {
+    value: '3',
+    label: 'Three',
+  },
+];
+
 describe('Select', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<Select name={'test-name'} />);
+    const wrapper = shallow(<Select name="test-name" options={[]} />);
 
     expect(wrapper).toBeTruthy();
   });
 
   it('displays a label', () => {
-    const mockLabel = 'mockLabel';
-    const wrapper = shallow(<Select name={'test-name'} label={mockLabel} />);
+    const wrapper = shallow(
+      <Select name="test-name" label={mockLabel} options={[]} />,
+    );
 
-    const label = wrapper.dive().find('label');
+    const label = wrapper.dive().find('[data-test-id="form-field-label"]');
 
     expect(label.text()).toBe(mockLabel);
   });
 
-  it('uses optional props when passed in', () => {
-    const mockProps = {
-      autoFocus: true,
-      className: '',
-      disabled: true,
-      id: 'test-id',
-      name: 'test-name',
-      onBlur: () => null,
-      onChange: () => null,
-      onFocus: () => null,
-    } as Record<string, unknown>;
-
-    const wrapper = shallow(<Select name="test-name" {...mockProps} />);
+  it('the given value must be filled in input', () => {
+    const wrapper = mount(
+      <Select name={'test-name'} options={mockOptions} value="2" />,
+    );
 
-    const select = wrapper.find('select');
+    const input = wrapper.find('[role="combobox"]');
 
-    expect(select.props()).toEqual(expect.objectContaining(mockProps));
+    expect(input.prop('value')).toEqual(mockOptions[1].label);
   });
 
-  it('sets select field using the value prop and emits updated values', () => {
-    const spy = jest.fn();
-    const mockValue = 'test-value';
-    const mockValueUpdated = 'updated-test-value';
-    const wrapper = shallow(
-      <Select name="test-name" value={mockValue} onChange={spy} />,
+  it('the popper must be rendered on input click', () => {
+    const wrapper = mount(
+      <Select name={'test-name'} options={mockOptions} value="2" />,
     );
+    const input = wrapper.find('[role="combobox"]');
+    input.simulate('mousedown');
 
-    const select = wrapper.find('select');
-
-    expect(select.prop('value')).toEqual(mockValue);
-
-    select.simulate('change', { target: { value: mockValueUpdated } });
-
-    expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy).toHaveBeenCalledWith({ target: { value: mockValueUpdated } });
+    const popper = document.querySelector('[role="tooltip"]');
+    expect(popper).not.toBeNull();
   });
 
   it('raises change, blur, and focus events', () => {
     const changeSpy = jest.fn();
     const blurSpy = jest.fn();
     const focusSpy = jest.fn();
-    const wrapper = shallow(
+    const wrapper = mount(
       <Select
         name={'test-name'}
         onChange={changeSpy}
         onBlur={blurSpy}
         onFocus={focusSpy}
+        options={mockOptions}
       />,
     );
 
-    const select = wrapper.find('select');
+    const input = wrapper.find('[role="combobox"]');
+    input.simulate('mousedown');
+    const firstOption = document.querySelector('[role="option"]');
+    firstOption?.dispatchEvent(new Event('click', { bubbles: true }));
 
-    select.simulate('change');
     expect(changeSpy).toHaveBeenCalledTimes(1);
 
-    select.simulate('blur');
+    input.simulate('blur');
     expect(blurSpy).toHaveBeenCalledTimes(1);
 
-    select.simulate('focus');
+    input.simulate('focus');
     expect(focusSpy).toHaveBeenCalledTimes(1);
   });
 
   it('applies error styling and renders error message when an error is passed', () => {
     const mockErrorMessage = 'test-error-message';
     const wrapper = shallow(
-      <Select name={'test-name'} error={mockErrorMessage} />,
+      <Select name={'test-name'} error={mockErrorMessage} options={[]} />,
     );
 
-    const errorMsg = wrapper.dive().find('small');
-    const errorStyling = wrapper.find('select');
+    const errorMsg = wrapper.dive().find('[data-test-id="form-field-error"]');
+    const input = wrapper.find('[role="combobox"]');
 
     expect(errorMsg.text()).toBe(mockErrorMessage);
-    expect(errorStyling.hasClass('hasError')).toBe(true);
+    expect(input.hasClass('hasError')).toBe(true);
   });
 });

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

@@ -6,14 +6,7 @@ import { createGroups } from '../../../helpers/storybook';
 import { Select } from './Select';
 
 const groups = createGroups({
-  Behavior: [
-    'autoFocus',
-    'disabled',
-    'inlineMode',
-    'name',
-    'id',
-    'addEmptyOption',
-  ],
+  Behavior: ['autoFocus', 'disabled', 'inlineMode', 'name', 'id'],
   Content: ['label', 'options', 'error', 'tooltipContent', 'value'],
   Styling: ['className'],
   Events: ['onChange', 'onBlur', 'onFocus'],
@@ -26,6 +19,7 @@ const meta: Meta<typeof Select> = {
     ...groups,
   },
 };
+
 export default meta;
 
 export const Main: StoryObj<typeof Select> = {
@@ -37,14 +31,18 @@ export const Main: StoryObj<typeof Select> = {
       { value: '2', label: 'Two' },
       { value: '3', label: 'Three' },
       { value: '4', label: 'Four' },
+      { value: '5', label: 'Five' },
+      { value: '6', label: 'Six' },
+      { value: '7', label: 'Seven' },
+      { value: '8', label: 'Eight' },
+      { value: '9', label: 'Nine' },
+      { value: '10', label: 'Ten' },
     ],
     tooltipContent: faker.lorem.paragraph(2),
-    addEmptyOption: false,
   },
   render: (args) =>
     React.createElement(() => {
       const [value, setValue] = useState(args.value);
-
       return (
         <Select
           {...args}

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