@axinom/mosaic-ui 0.69.0-rc.2 → 0.69.0-rc.21

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

@@ -1,6 +1,7 @@
-import { mount, shallow } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import { describe, expect, it, vi } from 'vitest';
 import { noop } from '../../../../../helpers/utils';
 import { CreateInputRendererConfig } from '../renderers.model';
 import { createInputRenderer } from './createInputRenderer';
@@ -39,30 +40,32 @@ const RendererWrapper: React.FC<RendererWrapperProps> = ({
 
 describe('createInputRenderer', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<RendererWrapper />);
-    expect(wrapper).toBeTruthy();
+    const { container } = render(<RendererWrapper />);
+    expect(container).toBeTruthy();
   });
 
   it(`sets 'input' value to current value`, () => {
     const mockValue = 'test-value';
-    const wrapper = mount(<RendererWrapper currentValue={mockValue} />);
+    const { container } = render(<RendererWrapper currentValue={mockValue} />);
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
 
-    expect(input.getDOMNode<HTMLInputElement>().value).toBe(mockValue);
+    expect(input.value).toBe(mockValue);
   });
 
   it(`emits 'onValueChange' with the new value when 'input' value has changed`, () => {
-    const onValueChangeSpy = jest.fn();
+    const onValueChangeSpy = vi.fn();
     const mockValueUpdated = 'updated-test-value';
-    const wrapper = mount(<RendererWrapper onValueChange={onValueChangeSpy} />);
+    const { container } = render(
+      <RendererWrapper onValueChange={onValueChangeSpy} />,
+    );
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
 
-    expect(input.getDOMNode<HTMLInputElement>().value).toBe('');
+    expect(input.value).toBe('');
 
     act(() => {
-      input.simulate('change', { target: { value: mockValueUpdated } });
+      fireEvent.change(input, { target: { value: mockValueUpdated } });
     });
 
     expect(onValueChangeSpy).toHaveBeenCalledTimes(1);
@@ -70,21 +73,21 @@ describe('createInputRenderer', () => {
   });
 
   it(`formats the value when a 'transformer' is set`, () => {
-    const onValueChangeSpy = jest.fn();
+    const onValueChangeSpy = vi.fn();
     const mockStringifiedNumber = '5';
     const stringToNumberTransformer = (value: string): number => Number(value);
 
-    const wrapper = mount(
+    const { container } = render(
       <RendererWrapper
         onValueChange={onValueChangeSpy}
         transform={stringToNumberTransformer}
       />,
     );
 
-    const input = wrapper.find('input');
+    const input = container.querySelector('input') as HTMLInputElement;
 
     act(() => {
-      input.simulate('change', {
+      fireEvent.change(input, {
         target: { value: mockStringifiedNumber },
       });
     });

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

@@ -14,6 +14,7 @@ export const createInputRenderer = ({
   name = '',
   placeholder,
   type = 'text',
+  autofocus = false,
   transform = (value: string) => value,
 }: CreateInputRendererConfig = {}): DynamicListDataEntryRenderer => {
   const inputRenderer = (
@@ -38,6 +39,7 @@ export const createInputRenderer = ({
         error={error}
         className={classes.container}
         value={(currentValue as string) ?? ''}
+        autoFocus={autofocus}
       />
     );
   };

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

@@ -1,8 +1,8 @@
-import { mount, shallow } from 'enzyme';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import { describe, expect, it, vi } from 'vitest';
 import { noop } from '../../../../../helpers/utils';
-import { Select } from '../../../../FormElements';
 import { CreateSelectRendererConfig } from '../renderers.model';
 import { createSelectRenderer } from './createSelectRenderer';
 
@@ -39,67 +39,92 @@ const RendererWrapper: React.FC<RendererWrapperProps> = ({
 
 describe('createSelectRenderer', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<RendererWrapper />);
-    expect(wrapper).toBeTruthy();
+    const { container } = render(<RendererWrapper />);
+    expect(container).toBeTruthy();
   });
 
   it(`sets 'select' value to current value`, () => {
     const mockOptions = [{ value: 'test-value', label: 'Test Value' }];
-    const wrapper = mount(
+    const { container } = render(
       <RendererWrapper
         currentValue={mockOptions[0].value}
         options={mockOptions}
       />,
     );
 
-    const input = wrapper.find('[role="combobox"]');
+    const input = container.querySelector(
+      '[role="combobox"]',
+    ) as HTMLInputElement;
 
-    expect(input.prop('value')).toBe(mockOptions[0].label);
+    expect(input.value).toBe(mockOptions[0].label);
   });
 
-  it(`emits 'onValueChange' with the new value when a new option has been selected`, () => {
-    const onValueChangeSpy = jest.fn();
+  it(`emits 'onValueChange' with the new value when a new option has been selected`, async () => {
+    const onValueChangeSpy = vi.fn();
     const mockValueUpdated = 'updated-test-value';
-    const wrapper = mount(<RendererWrapper onValueChange={onValueChangeSpy} />);
+    const mockOptions = [{ value: mockValueUpdated, label: 'Updated Value' }];
+    const { container } = render(
+      <RendererWrapper
+        onValueChange={onValueChangeSpy}
+        options={mockOptions}
+      />,
+    );
+
+    const input = container.querySelector('[role="combobox"]') as HTMLElement;
+
+    act(() => {
+      fireEvent.mouseDown(input);
+    });
 
-    const select = wrapper.find(Select);
-    expect(select.prop('value')).toBe('');
+    const option = await waitFor(() => {
+      const options = document.querySelectorAll('[role="option"]');
+      const el = Array.from(options).find(
+        (opt) => opt.textContent === 'Updated Value',
+      ) as HTMLElement;
+      expect(el).toBeInTheDocument();
+      return el;
+    });
 
     act(() => {
-      select.prop('onChange')?.({
-        // @ts-expect-error not full event args object
-        currentTarget: { value: mockValueUpdated },
-      });
-      wrapper.update();
+      fireEvent.click(option);
     });
 
-    expect(onValueChangeSpy).toHaveBeenCalledTimes(1);
     expect(onValueChangeSpy).toHaveBeenCalledWith(mockValueUpdated);
   });
 
-  it(`formats the value when a 'transformer' is set`, () => {
-    const onValueChangeSpy = jest.fn();
+  it(`formats the value when a 'transformer' is set`, async () => {
+    const onValueChangeSpy = vi.fn();
     const mockStringifiedNumber = '5';
     const stringToNumberTransformer = (value: string): number => Number(value);
+    const mockOptions = [{ value: mockStringifiedNumber, label: 'Five' }];
 
-    const wrapper = mount(
+    const { container } = render(
       <RendererWrapper
         onValueChange={onValueChangeSpy}
         transform={stringToNumberTransformer}
+        options={mockOptions}
       />,
     );
 
-    const select = wrapper.find(Select);
+    const input = container.querySelector('[role="combobox"]') as HTMLElement;
+
+    act(() => {
+      fireEvent.mouseDown(input);
+    });
+
+    const option = await waitFor(() => {
+      const options = document.querySelectorAll('[role="option"]');
+      const el = Array.from(options).find(
+        (opt) => opt.textContent === 'Five',
+      ) as HTMLElement;
+      expect(el).toBeInTheDocument();
+      return el;
+    });
 
     act(() => {
-      select.prop('onChange')?.({
-        // @ts-expect-error not full event args object
-        currentTarget: { value: mockStringifiedNumber },
-      });
-      wrapper.update();
+      fireEvent.click(option);
     });
 
-    expect(onValueChangeSpy).toHaveBeenCalledTimes(1);
     expect(onValueChangeSpy).toHaveBeenCalledWith(
       Number(mockStringifiedNumber),
     );

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

@@ -22,6 +22,7 @@ export const createSelectRenderer = ({
   options = [],
   defaultValue,
   transform = (value: string) => value,
+  autofocus = false,
 }: CreateSelectRendererConfig = {}): DynamicListDataEntryRenderer => {
   const selectRenderer = (
     currentValue: unknown,
@@ -49,6 +50,7 @@ export const createSelectRenderer = ({
         className={classes.container}
         value={(currentValue as string) ?? ''}
         options={options}
+        autoFocus={autofocus}
       />
     );
   };

package/src/components/DynamicDataList/DynamicListDataEntry/Renderers/renderers.model.ts

@@ -9,6 +9,8 @@ export interface BaseRendererConfig {
   placeholder?: string;
   /** Optional transformer that will change the final value to match the return value */
   transform?: (value: string) => unknown;
+  /** Optional autofocus on render (default: false) */
+  autofocus?: boolean;
 }
 
 export interface CreateInputRendererConfig extends BaseRendererConfig {

package/src/components/DynamicDataList/DynamicListHeader/DynamicListHeader.scss

@@ -13,7 +13,8 @@
   grid-auto-rows: var(--dynamic-list-row-height, $dynamic-list-row-height);
   column-gap: var(--dynamic-list-column-gap, $dynamic-list-column-gap);
 
-  border-bottom: solid 1px var(--dynamic-list-header-border-color, $dynamic-list-header-border-color);
+  border-bottom: solid 1px
+    var(--dynamic-list-header-border-color, $dynamic-list-header-border-color);
 
   justify-items: left;
   align-items: center;
@@ -36,7 +37,14 @@
       height: 100%;
 
       z-index: 1;
-      border-right: var(--explorer-list-row-border, 1px solid var(--dynamic-list-header-resize-border-color, $dynamic-list-header-resize-border-color));
+      border-right: var(
+        --explorer-list-row-border,
+        1px solid
+          var(
+            --dynamic-list-header-resize-border-color,
+            $dynamic-list-header-resize-border-color
+          )
+      );
       position: absolute;
       right: 0;
 
@@ -61,11 +69,17 @@
   }
 
   p {
-    color: var(--input-color, $input-color);
-    font-size: var(--label-font-size, $label-font-size);
+    color: var(--explorer-column-label-color, $explorer-column-label-color);
+    font-size: var(
+      --explorer-column-label-font-size,
+      $explorer-column-label-font-size
+    );
     font-weight: bold;
 
-    white-space: nowrap;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+
     text-overflow: ellipsis;
     overflow: hidden;
   }

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

@@ -1,5 +1,6 @@
-import { mount, shallow } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import { DynamicListColumn } from '../DynamicDataList.model';
 import { DynamicListHeader, DynamicListHeaderProps } from './DynamicListHeader';
 
@@ -34,19 +35,19 @@ const defaultProps: DynamicListHeaderProps<DynamicListHeaderTestData> = {
   verticalTextAlign: 'center',
   positionKey: 'position',
   allowReordering: undefined,
-  onColumnSizesChanged: jest.fn(),
-  onResetColumnSizes: jest.fn(),
+  onColumnSizesChanged: vi.fn(),
+  onResetColumnSizes: vi.fn(),
 };
 
 describe('DynamicListHeader', () => {
   it('renders the component without crashing', () => {
-    const wrapper = shallow(<DynamicListHeader {...defaultProps} />);
+    const { container } = render(<DynamicListHeader {...defaultProps} />);
 
-    expect(wrapper).toBeTruthy();
+    expect(container).toBeTruthy();
   });
 
   it('header should not be draggable', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <DynamicListHeader
         {...defaultProps}
         columns={defaultColumns}
@@ -54,72 +55,59 @@ describe('DynamicListHeader', () => {
       />,
     );
 
-    const draggableAttribute = wrapper.find('.container').prop('draggable');
+    const draggableAttribute = (
+      container.querySelector('.container') as HTMLElement
+    )?.getAttribute('draggable');
 
-    expect(draggableAttribute).toBeUndefined();
+    expect(draggableAttribute).toBeNull();
   });
 
   it('most styling props, except gridTemplateColumns, should be undefined by default', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <DynamicListHeader
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
-        onColumnSizesChanged={jest.fn()}
-        onResetColumnSizes={jest.fn()}
+        onColumnSizesChanged={vi.fn()}
+        onResetColumnSizes={vi.fn()}
       />,
     );
 
-    const header = wrapper.find('.container');
+    const header = container.querySelector('.container') as HTMLElement;
 
-    expect(header.prop('style')).toHaveProperty('gridColumnGap', undefined);
-    expect(header.prop('style')).toHaveProperty('alignItems', undefined);
-    expect(header.prop('style')).toHaveProperty('gridAutoRows', undefined);
-    expect(header.prop('style')).toHaveProperty(
-      'gridTemplateColumns',
-      defaultProps.columnSizes,
-    );
-    expect(header.prop('style')).toHaveProperty('justifyItems', undefined);
+    expect(header.style.gridColumnGap).toBe('');
+    expect(header.style.alignItems).toBe('');
+    expect(header.style.gridAutoRows).toBe('');
+    expect(header.style.gridTemplateColumns).toBe(defaultProps.columnSizes);
+    expect(header.style.justifyItems).toBe('');
   });
 
   it('sets styling props when passed in', () => {
-    const wrapper = shallow(<DynamicListHeader {...defaultProps} />);
+    const { container } = render(<DynamicListHeader {...defaultProps} />);
 
-    const header = wrapper.find('.container');
+    const header = container.querySelector('.container') as HTMLElement;
 
-    expect(header.prop('style')).toHaveProperty(
-      'gridColumnGap',
-      defaultProps.columnGap,
-    );
-    expect(header.prop('style')).toHaveProperty(
-      'alignItems',
-      defaultProps.verticalTextAlign,
-    );
-    expect(header.prop('style')).toHaveProperty(
-      'gridAutoRows',
-      defaultProps.rowHeight,
-    );
-    expect(header.prop('style')).toHaveProperty(
-      'gridTemplateColumns',
-      defaultProps.columnSizes,
-    );
-    expect(header.prop('style')).toHaveProperty(
-      'justifyItems',
-      defaultProps.horizontalTextAlign,
-    );
+    expect(header.style.gridColumnGap).toBe(defaultProps.columnGap);
+    expect(header.style.alignItems).toBe(defaultProps.verticalTextAlign);
+    expect(header.style.gridAutoRows).toBe(defaultProps.rowHeight);
+    expect(header.style.gridTemplateColumns).toBe(defaultProps.columnSizes);
+    expect(header.style.justifyItems).toBe(defaultProps.horizontalTextAlign);
   });
 
   it('renders a label for every column if set', () => {
-    const wrapper = shallow(<DynamicListHeader {...defaultProps} />);
+    const { container } = render(<DynamicListHeader {...defaultProps} />);
 
-    const columns = wrapper.find('.column').slice(0, -1); // remove the last column, which is the action column
+    const columns = Array.from(container.querySelectorAll('.column')).slice(
+      0,
+      -1,
+    ); // remove the last column, which is the action column
 
     columns.forEach((column, idx) => {
-      expect(column.text()).toEqual(defaultColumns[idx].label);
+      expect(column.textContent).toEqual(defaultColumns[idx].label);
     });
   });
 
   it(`renders the position column if 'showPositionColumn' is set to true`, () => {
-    const wrapper = shallow(
+    const { container } = render(
       <DynamicListHeader
         {...defaultProps}
         columnSizes={''}
@@ -131,16 +119,16 @@ describe('DynamicListHeader', () => {
       />,
     );
 
-    const position = wrapper.find('.position');
+    const position = container.querySelector('.position');
 
-    expect(position.exists()).toBe(true);
-    expect(position.text()).toBe('Position');
+    expect(position).toBeInTheDocument();
+    expect(position?.textContent).toBe('Position');
   });
 
   it(`sets the position label if set`, () => {
     const mockLabel = 'test-label';
 
-    const wrapper = shallow(
+    const { container } = render(
       <DynamicListHeader
         {...defaultProps}
         columnSizes={''}
@@ -152,14 +140,14 @@ describe('DynamicListHeader', () => {
       />,
     );
 
-    const position = wrapper.find('.position');
+    const position = container.querySelector('.position');
 
-    expect(position.exists()).toBe(true);
-    expect(position.text()).toBe(mockLabel);
+    expect(position).toBeInTheDocument();
+    expect(position?.textContent).toBe(mockLabel);
   });
 
   it(`doesn't render the position column if a 'positionKey' isn't set`, () => {
-    const wrapper = shallow(
+    const { container } = render(
       <DynamicListHeader
         {...defaultProps}
         columnSizes={''}
@@ -168,13 +156,13 @@ describe('DynamicListHeader', () => {
       />,
     );
 
-    const position = wrapper.find('.position');
+    const position = container.querySelector('.position');
 
-    expect(position.exists()).toBe(false);
+    expect(position).not.toBeInTheDocument();
   });
 
   it(`doesn't render the position column if 'allowReordering' is false`, () => {
-    const wrapper = shallow(
+    const { container } = render(
       <DynamicListHeader
         {...defaultProps}
         columnSizes={''}
@@ -184,27 +172,29 @@ describe('DynamicListHeader', () => {
       />,
     );
 
-    const position = wrapper.find('.position');
+    const position = container.querySelector('.position');
 
-    expect(position.exists()).toBe(false);
+    expect(position).not.toBeInTheDocument();
   });
 
   describe('Column Resizing', () => {
     it('calls onResetColumnSizes when the reset button is clicked', () => {
-      const spy = jest.fn();
-      const wrapper = shallow(
+      const spy = vi.fn();
+      const { container } = render(
         <DynamicListHeader {...defaultProps} onResetColumnSizes={spy} />,
       );
 
-      const resetButton = wrapper.find('.resizeHandle').first();
-      resetButton.simulate('doubleClick');
+      const resetButton = container.querySelector(
+        '.resizeHandle',
+      ) as HTMLElement;
+      fireEvent.doubleClick(resetButton);
 
       expect(spy).toHaveBeenCalledTimes(1);
     });
 
     it('calls onResetColumnSizes when the reset button is clicked also on non-resizable column', () => {
-      const spy = jest.fn();
-      const wrapper = shallow(
+      const spy = vi.fn();
+      const { container } = render(
         <DynamicListHeader
           {...defaultProps}
           columns={[
@@ -215,27 +205,33 @@ describe('DynamicListHeader', () => {
         />,
       );
 
-      const resetButton = wrapper.find('.resizeHandle').first();
-      resetButton.simulate('doubleClick');
+      const resetButton = container.querySelector(
+        '.resizeHandle',
+      ) as HTMLElement;
+      fireEvent.doubleClick(resetButton);
 
       expect(spy).toHaveBeenCalledTimes(1);
     });
 
     it('calls onColumnSizesChanged when the column is resized', () => {
-      const spy = jest.fn();
-      const wrapper = mount(
+      const spy = vi.fn();
+      const { container } = render(
         <DynamicListHeader {...defaultProps} onColumnSizesChanged={spy} />,
       );
 
-      const resizeHandle = wrapper.find('.resizeHandle').first();
-      resizeHandle.invoke('onMouseDown')!({
-        preventDefault: jest.fn(),
-      } as any);
+      const resizeHandle = container.querySelector(
+        '.resizeHandle',
+      ) as HTMLElement;
+
+      fireEvent.mouseDown(resizeHandle, {
+        preventDefault: vi.fn(),
+      });
 
-      window.dispatchEvent(
-        new Event('mousemove', {
+      fireEvent(
+        window,
+        new MouseEvent('mousemove', {
           clientX: 100,
-        } as any),
+        }),
       );
 
       window.dispatchEvent(new Event('mouseup', {} as any));

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.scss

@@ -34,6 +34,7 @@
 
   &:hover .editable {
     border: 1px solid var(--input-hover-color, $input-hover-color);
+    padding: 0 12px;
   }
 
   .column {
@@ -79,10 +80,16 @@
     }
 
     .dragIcon {
-      stroke: var(--dynamic-list-row-disabled-drag-icon-color, $dynamic-list-row-disabled-drag-icon-color);
+      stroke: var(
+        --dynamic-list-row-disabled-drag-icon-color,
+        $dynamic-list-row-disabled-drag-icon-color
+      );
 
       rect {
-        fill: var(--dynamic-list-row-disabled-drag-icon-color, $dynamic-list-row-disabled-drag-icon-color);
+        fill: var(
+          --dynamic-list-row-disabled-drag-icon-color,
+          $dynamic-list-row-disabled-drag-icon-color
+        );
       }
     }
   }