@axinom/mosaic-ui 0.54.0-rc.1 → 0.54.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.54.0-rc.1",
+  "version": "0.54.0-rc.2",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.27-rc.1",
+    "@axinom/mosaic-core": "^0.4.27-rc.2",
     "@faker-js/faker": "^7.4.0",
     "@geoffcox/react-splitter": "^2.1.2",
     "@popperjs/core": "^2.11.8",
@@ -106,5 +106,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "317b13a7a34e369eb547a0a91aaedd05f9bb00fe"
+  "gitHead": "2d015f129e61beade8826336c6d32e49a5eb36a3"
 }

package/src/components/DynamicDataList/DynamicDataList.stories.tsx

@@ -246,6 +246,10 @@ export const WithSelectInputRenderer: StoryObj<StoryDDLType> = {
       },
     ],
     allowNewData: true,
+    rowValidationSchema: Yup.object({
+      id: Yup.number().required(),
+      title: Yup.string().required().max(25).label('Title'),
+    }),
   },
 };
 

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

@@ -1,92 +1,15 @@
 @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 {
   height: 100%;
   width: 100%;
 
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
+  grid-template-rows: min-content min-content;
 
   select {
-    box-sizing: border-box;
-    height: var(--dynamic-list-input-height, $dynamic-list-input-height);
+    max-width: none;
     width: 100%;
-
-    padding-left: 6px;
-
-    color: var(--input-color, $input-color);
-    font-size: var(--label-font-size, $label-font-size);
-
-    -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);
-    outline: none;
-
-    background-image: svg-arrow-glyph(
-      var(--select-arrow-color, encodecolor($select-arrow-color))
-    );
-    //background-image: url('data:image/svg+xml;utf8,<svg stroke="%231478af" 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>');
-    background-repeat: no-repeat;
-    background-position: center;
-    background-position-x: 100%;
-
-    padding: 0 40px 0 12px;
-
-    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
-      );
-    }
-
-    &:not(:disabled):hover {
-      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);
-    }
-  }
-
-  select,
-  option {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  select > small {
-    padding: 6px 0;
-    white-space: normal;
-    color: var(--input-invalid-color, $input-invalid-color);
   }
 }

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

@@ -1,7 +1,8 @@
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { noop } from '../../../../../helpers/utils';
+import { Select } from '../../../../FormElements';
 import { CreateSelectRendererConfig } from '../renderers.model';
 import { createSelectRenderer } from './createSelectRenderer';
 
@@ -42,102 +43,29 @@ describe('createSelectRenderer', () => {
     expect(wrapper).toBeTruthy();
   });
 
-  it(`renders an 'id' attribute on the 'select' element if set`, () => {
-    const mockId = 'test-id';
-    const wrapper = shallow(<RendererWrapper id={mockId} />);
-
-    const select = wrapper.find('select');
-
-    expect(select.prop('id')).toBe(mockId);
-  });
-
-  it(`renders a 'name' attribute on the 'select' element if set`, () => {
-    const mockName = 'test-name';
-    const wrapper = shallow(<RendererWrapper name={mockName} />);
-
-    const select = wrapper.find('select');
-
-    expect(select.prop('name')).toBe(mockName);
-  });
-
-  it('renders "disabled" attribute on the "select" element with value "false" if not set otherwise', () => {
-    const wrapper = shallow(<RendererWrapper />);
-
-    const input = wrapper.find('select');
-
-    expect(input.prop('disabled')).toBe(false);
-  });
-
-  it('renders "disabled" attribute on the "select" element if set', () => {
-    const wrapper = shallow(<RendererWrapper disabled={true} />);
-
-    const input = wrapper.find('select');
-
-    expect(input.prop('disabled')).toBe(true);
-  });
-
-  it(`doesn't render placeholder by default`, () => {
-    const wrapper = shallow(<RendererWrapper />);
-
-    const option = wrapper.find('option');
-
-    expect(option.exists()).toBe(false);
-  });
-
-  it(`renders a placeholder option if the 'placeholder' prop is set`, () => {
-    const mockPlaceholder = 'test-placeholder';
-    const wrapper = shallow(<RendererWrapper placeholder={mockPlaceholder} />);
-
-    const option = wrapper.find('option');
-
-    expect(option.text()).toBe(mockPlaceholder);
-    expect(option.prop('value')).toBe('');
-    expect(option.prop('disabled')).toBe(true);
-  });
   it(`sets 'select' value to current value`, () => {
     const mockValue = 'test-value';
-    const wrapper = shallow(<RendererWrapper currentValue={mockValue} />);
+    const wrapper = mount(<RendererWrapper currentValue={mockValue} />);
 
     const select = wrapper.find('select');
 
     expect(select.prop('value')).toBe(mockValue);
   });
 
-  it('renders all options', () => {
-    const mockOptions = [
-      { value: '10', label: '10' },
-      { value: '11', label: '11' },
-    ];
-    const wrapper = shallow(<RendererWrapper options={mockOptions} />);
-
-    const options = wrapper.find('option');
-
-    options.forEach((option, idx) => {
-      expect(option.text()).toBe(mockOptions[idx].label);
-      expect(option.prop('value')).toBe(mockOptions[idx].value);
-    });
-  });
-
-  it(`doesn't render any option elements if 'options' prop is not set`, () => {
-    const wrapper = shallow(<RendererWrapper options={undefined} />);
-
-    const options = wrapper.find('option');
-
-    expect(options.exists()).toBe(false);
-  });
-
   it(`emits 'onValueChange' with the new value when a new option has been selected`, () => {
     const onValueChangeSpy = jest.fn();
     const mockValueUpdated = 'updated-test-value';
-    const wrapper = shallow(
-      <RendererWrapper onValueChange={onValueChangeSpy} />,
-    );
+    const wrapper = mount(<RendererWrapper onValueChange={onValueChangeSpy} />);
 
-    const select = wrapper.find('select');
+    const select = wrapper.find(Select);
     expect(select.prop('value')).toBe('');
 
     act(() => {
-      select.simulate('change', { target: { value: mockValueUpdated } });
+      select.prop('onChange')?.({
+        // @ts-expect-error not full event args object
+        currentTarget: { value: mockValueUpdated },
+      });
+      wrapper.update();
     });
 
     expect(onValueChangeSpy).toHaveBeenCalledTimes(1);
@@ -149,17 +77,21 @@ describe('createSelectRenderer', () => {
     const mockStringifiedNumber = '5';
     const stringToNumberTransformer = (value: string): number => Number(value);
 
-    const wrapper = shallow(
+    const wrapper = mount(
       <RendererWrapper
         onValueChange={onValueChangeSpy}
         transform={stringToNumberTransformer}
       />,
     );
 
-    const select = wrapper.find('select');
+    const select = wrapper.find(Select);
 
     act(() => {
-      select.simulate('change', { target: { value: mockStringifiedNumber } });
+      select.prop('onChange')?.({
+        // @ts-expect-error not full event args object
+        currentTarget: { value: mockStringifiedNumber },
+      });
+      wrapper.update();
     });
 
     expect(onValueChangeSpy).toHaveBeenCalledTimes(1);

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

@@ -1,6 +1,6 @@
-import clsx from 'clsx';
-import React, { ChangeEvent } from 'react';
+import React, { FormEvent } from 'react';
 import { DynamicListDataEntryRenderer } from '../../../../DynamicDataList/DynamicDataList.model';
+import { Select } from '../../../../FormElements';
 import { CreateSelectRendererConfig } from '../renderers.model';
 import classes from './createSelectRenderer.scss';
 
@@ -17,7 +17,7 @@ import classes from './createSelectRenderer.scss';
  */
 export const createSelectRenderer = ({
   id,
-  name,
+  name = '',
   placeholder,
   options = [],
   defaultValue,
@@ -33,34 +33,23 @@ export const createSelectRenderer = ({
       onValueChange(defaultValue);
     }
 
-    const onChangeHandler = (e: ChangeEvent<HTMLSelectElement>): void => {
-      onValueChange(transform(e.target.value)); // emit onChange with transformed value
+    const onChangeHandler = (e: FormEvent<HTMLSelectElement>): void => {
+      onValueChange(transform(e.currentTarget.value)); // emit onChange with transformed value
     };
 
     return (
-      <div className={classes.container}>
-        <select
-          id={id}
-          name={name}
-          placeholder={disabled ? undefined : placeholder}
-          value={(currentValue as string) ?? ''}
-          onChange={onChangeHandler}
-          className={clsx({ [classes.hasError]: error !== undefined })}
-          disabled={disabled}
-        >
-          {placeholder && (
-            <option value="" disabled>
-              {disabled ? '' : placeholder}
-            </option>
-          )}
-          {options.map((option) => (
-            <option key={option.value} value={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </select>
-        {error !== undefined && <small>{error}</small>}
-      </div>
+      <Select
+        id={id}
+        name={name}
+        disabled={disabled}
+        placeholder={placeholder}
+        onChange={onChangeHandler}
+        inlineMode={true}
+        error={error}
+        className={classes.container}
+        value={(currentValue as string) ?? ''}
+        options={options}
+      />
     );
   };
 

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

@@ -13,6 +13,8 @@ export interface SelectProps extends BaseFormControl, BaseSelectEvents {
   autoFocus?: boolean;
   /** Defines whether an empty option should be added as the first option (default: false) */
   addEmptyOption?: boolean;
+  /** Select placeholder */
+  placeholder?: string;
 }
 
 export const Select: React.FC<SelectProps> = ({
@@ -24,6 +26,7 @@ export const Select: React.FC<SelectProps> = ({
   error,
   autoFocus = false,
   addEmptyOption = false,
+  placeholder,
   onChange,
   onBlur,
   onFocus,
@@ -50,7 +53,15 @@ export const Select: React.FC<SelectProps> = ({
         onBlur={onBlur}
         onFocus={onFocus}
       >
-        {addEmptyOption && <option value=""></option>}
+        {addEmptyOption &&
+          (placeholder === null || placeholder === undefined) && (
+            <option value=""></option>
+          )}
+        {placeholder && (
+          <option value="" disabled>
+            {disabled ? '' : placeholder}
+          </option>
+        )}
         {options.map((option) => (
           <option key={option.value} value={option.value}>
             {option.label}