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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.55.0-rc.1",
+  "version": "0.55.0-rc.11",
   "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.1",
+    "@axinom/mosaic-core": "^0.4.28-rc.11",
     "@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": "9a3fc4c143a12aaabedd95667504fd5757ddc2b2"
+  "gitHead": "45f7a689961673ef06813544d1f2af49f7e352ee"
 }

package/src/components/DynamicDataList/DynamicDataList.spec.tsx

@@ -177,22 +177,18 @@ describe('DynamicDataList', () => {
     const wrapper = shallow(<DynamicDataList {...defaultProps} />);
 
     const header = wrapper.find(DynamicListHeader);
-    const container = wrapper.find('.container');
 
     expect(header.exists()).toBe(true);
-    expect(container.hasClass('noHeader')).toBe(false);
   });
 
-  it(`hides header row if 'showHeader' is false and adds the 'noHeader' css class`, () => {
+  it(`hides header row if 'showHeader' is false`, () => {
     const wrapper = shallow(
       <DynamicDataList {...defaultProps} showHeader={false} />,
     );
 
     const header = wrapper.find(DynamicListHeader);
-    const container = wrapper.find('.container');
 
     expect(header.exists()).toBe(false);
-    expect(container.hasClass('noHeader')).toBe(true);
   });
 
   it(`sets 'positionKey' prop for DynamicListRow`, () => {

package/src/components/DynamicDataList/DynamicDataList.tsx

@@ -145,6 +145,7 @@ export const DynamicDataList = <T extends Data>({
     columns,
     allowReordering,
     allowNewData,
+    allowEditing,
     allowRowDragging,
     positionPropertyName,
     !!inlineMenuActions,
@@ -298,7 +299,6 @@ export const DynamicDataList = <T extends Data>({
     <div
       className={clsx(
         classes.container,
-        { [classes.noHeader]: !showHeader },
         'dynamic-data-list-container',
         className,
       )}

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/DynamicDataList/helpers/useColumnDefs.ts

@@ -12,6 +12,7 @@ export const useColumnDefs = function <T extends Data>(
   columns: DynamicListColumn<T>[],
   allowReordering: boolean,
   allowNewData: boolean,
+  allowEditing: boolean,
   allowRowDragging: boolean,
   positionKey?: keyof T,
   showInlineMenu?: boolean,
@@ -30,7 +31,7 @@ export const useColumnDefs = function <T extends Data>(
       allowReordering,
       allowRowDragging,
       positionKey,
-      allowNewData || showInlineMenu,
+      allowNewData || showInlineMenu || allowEditing,
     ),
   );
 
@@ -43,13 +44,14 @@ export const useColumnDefs = function <T extends Data>(
         allowReordering,
         allowRowDragging,
         positionKey,
-        allowNewData || showInlineMenu,
+        allowNewData || showInlineMenu || allowEditing,
       ),
     );
     if (!isResized) {
       setColumnSizes(orgColumnSizes);
     }
   }, [
+    allowEditing,
     allowNewData,
     allowReordering,
     allowRowDragging,

package/src/components/FormElements/FileUploadControl/FileUploadControl.scss

@@ -53,7 +53,7 @@
       display: grid;
       align-content: center;
       color: var(--input-disabled-font-color, $input-disabled-font-color);
-      border: 1px solid var(--file-upload-input, $file-upload-input);
+      border: 1px dashed var(--file-upload-input, $file-upload-input);
       background-color: var(
         --read-only-text-background-color,
         $read-only-text-background-color
@@ -80,13 +80,12 @@
       display: grid;
       align-content: center;
       text-align: center;
-      border: 1px dashed var(--input-border-color, $input-border-color);
+      border: 1px dashed var(--file-upload-input, $file-upload-input);
       grid-column: 1 / span 2;
       height: 100px;
       width: 650px;
       z-index: 9999;
 
-      background-color: white;
       transition: box-shadow 0.15s ease-in-out 0s;
 
       &:hover {

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

@@ -32,7 +32,6 @@ export const Default: StoryObj<typeof FileUploadControl> = {
   args: {
     name: 'fileUpload',
     label: 'Ingest File',
-    placeholder: 'Select File...',
     tooltipContent: faker.lorem.paragraph(2),
   },
   render: (args) =>

package/src/components/FormElements/FileUploadControl/FileUploadControl.tsx

@@ -34,7 +34,7 @@ export const FileUploadControl: React.FC<FileUploadProps> = ({
   onFileSelected,
   error,
   id = 'file',
-  placeholder,
+  placeholder = 'Browse or drag your file here',
   value,
   accept,
   className = '',
@@ -138,7 +138,7 @@ export const FileUploadControl: React.FC<FileUploadProps> = ({
       <div className={clsx(classes.content)}>
         {dragging && !disabled ? (
           <div className={clsx(classes.dropTarget)} onDrop={handleDrop}>
-            DROP YOUR FILE HERE!
+            Drag & Drop your file here
           </div>
         ) : (
           <>

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}