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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.34.0-rc.1",
+  "version": "0.34.0-rc.11",
   "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.7-rc.1",
+    "@axinom/mosaic-core": "^0.4.7-rc.11",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -102,5 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7da4d7a3fa346df01e570d17d20a816477cdd708"
+  "gitHead": "a0c164baba1be782cb9f7012c088f51fa8f5ed7b"
 }

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

@@ -49,7 +49,7 @@ describe('createInputRenderer', () => {
 
     const input = wrapper.find('input');
 
-    expect(input.prop('value')).toBe(mockValue);
+    expect(input.getDOMNode<HTMLInputElement>().value).toBe(mockValue);
   });
 
   it(`emits 'onValueChange' with the new value when 'input' value has changed`, () => {
@@ -59,7 +59,7 @@ describe('createInputRenderer', () => {
 
     const input = wrapper.find('input');
 
-    expect(input.prop('value')).toBe('');
+    expect(input.getDOMNode<HTMLInputElement>().value).toBe('');
 
     act(() => {
       input.simulate('change', { target: { value: mockValueUpdated } });

package/src/components/Explorer/Explorer.stories.tsx

@@ -238,6 +238,22 @@ initializeUi({
     action('showNotification')(args);
     return faker.random.numeric();
   },
+  addIndicator: (args) => {
+    action('addIndicator')(args);
+    return Math.random();
+  },
+  removeIndicator: (args) => {
+    action('removeIndicator')(args);
+  },
+  showSaveIndicator: () => {
+    action('showSaveIndicator')();
+  },
+  hideSaveIndicator: () => {
+    action('hideSaveIndicator')();
+  },
+  on: (event, callback) => {
+    action('on')(event, callback);
+  },
 });
 
 export const ActionErrors: StoryObj<ExplorerStoryType> = {

package/src/components/Explorer/Explorer.tsx

@@ -433,37 +433,39 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
           setActiveFilters(args);
         }}
       />
-      <List<T>
-        columns={columns}
-        data={data}
-        isLoading={isLoading}
-        isError={Boolean(stationMessage?.type === 'error')}
-        handleRetry={false}
-        minimumWidth={minimumWidth}
-        columnGap={columnGap}
-        rowGap={rowGap}
-        headerRowHeight={headerRowHeight}
-        listRowHeight={listRowHeight}
-        listRowActionSize={listRowActionSize}
-        headerRowActionSize={headerRowActionSize}
-        horizontalTextAlign={horizontalTextAlign}
-        verticalTextAlign={verticalTextAlign}
-        keyProperty={keyProperty}
-        showActionButton={Boolean(generateItemLink) || Boolean(onItemClicked)} // or hard code to `true`?
-        selectionMode={mode}
-        enableSelectAll={enableSelectAll}
-        loadingTriggerOffset={loadingTriggerOffset}
-        defaultSortOrder={sortOrder}
-        generateItemLink={generateItemLink}
-        onItemClicked={onItemClickedHandler}
-        onItemSelected={itemSelectedHandler}
-        onRequestMoreData={onRequestMoreData}
-        onSortChanged={(sortData: SortData<T>) => {
-          onSortChanged(sortData);
-          setSortOrder(sortData);
-        }}
-        inlineMenuActions={inlineMenuActions && inlineMenuActionsHandler}
-      />
+      <div>
+        <List<T>
+          columns={columns}
+          data={data}
+          isLoading={isLoading}
+          isError={Boolean(stationMessage?.type === 'error')}
+          handleRetry={false}
+          minimumWidth={minimumWidth}
+          columnGap={columnGap}
+          rowGap={rowGap}
+          headerRowHeight={headerRowHeight}
+          listRowHeight={listRowHeight}
+          listRowActionSize={listRowActionSize}
+          headerRowActionSize={headerRowActionSize}
+          horizontalTextAlign={horizontalTextAlign}
+          verticalTextAlign={verticalTextAlign}
+          keyProperty={keyProperty}
+          showActionButton={Boolean(generateItemLink) || Boolean(onItemClicked)} // or hard code to `true`?
+          selectionMode={mode}
+          enableSelectAll={enableSelectAll}
+          loadingTriggerOffset={loadingTriggerOffset}
+          defaultSortOrder={sortOrder}
+          generateItemLink={generateItemLink}
+          onItemClicked={onItemClickedHandler}
+          onItemSelected={itemSelectedHandler}
+          onRequestMoreData={onRequestMoreData}
+          onSortChanged={(sortData: SortData<T>) => {
+            onSortChanged(sortData);
+            setSortOrder(sortData);
+          }}
+          inlineMenuActions={inlineMenuActions && inlineMenuActionsHandler}
+        />
+      </div>
     </div>
   );
 });

package/src/components/Filters/Filter/Filter.spec.tsx

@@ -1,7 +1,12 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { Button } from '../../Buttons';
-import { CustomFilterProps, FilterType, FilterTypes } from '../Filters.model';
+import {
+  CustomFilterProps,
+  FilterType,
+  FilterTypes,
+  SelectedValueRenderer,
+} from '../Filters.model';
 import { FreeTextFilter } from '../SelectionTypes/FreeTextFilter/FreeTextFilter';
 import { OptionsFilter } from '../SelectionTypes/OptionsFilter/OptionsFilter';
 import { Filter, FilterProps } from './Filter';
@@ -148,6 +153,24 @@ describe('Filter', () => {
     expect(wrapper.find('.selectedValue').exists()).toBe(false);
   });
 
+  it(`'selectedValueRenderer' value is displayed when the prop is set`, () => {
+    const renderedValue = `${sampleText} renderer`;
+    const selectedValueRenderer: SelectedValueRenderer = (value) => {
+      return `${value} renderer`;
+    };
+
+    const wrapper = mount(
+      <Filter {...defaultProps} options={freeTextFilter} value={sampleText} />,
+    );
+
+    expect(wrapper.find('.selectedValue').text()).toEqual(sampleText);
+
+    wrapper.setProps({ selectedValueRenderer });
+    wrapper.update();
+
+    expect(wrapper.find('.selectedValue').text()).toEqual(renderedValue);
+  });
+
   it('Raises onFilterChange with prop name and new undefined value when filter is closed', () => {
     const mockValue = 'test-value';
     const wrapper = mount(

package/src/components/Filters/Filter/Filter.tsx

@@ -26,6 +26,7 @@ export interface FilterProps<T extends Data> {
   index?: number;
   isActive: boolean;
   className?: string;
+  selectedValueRenderer?: (value: FilterValue) => string;
   onFilterChange: (prop: keyof T, value: FilterValue, index: number) => void;
   onValidate?: (currentValue: FilterValue) => string | null | undefined;
   onFilterClicked: () => void;
@@ -37,6 +38,7 @@ export const Filter = <T extends Data>({
   index = -1,
   isActive,
   className = '',
+  selectedValueRenderer,
   onFilterChange,
   onFilterClicked,
   onValidate,
@@ -72,6 +74,10 @@ export const Filter = <T extends Data>({
   };
 
   const renderValue = (value: unknown): ReactNode => {
+    if (selectedValueRenderer !== undefined) {
+      return selectedValueRenderer(value);
+    }
+
     switch (options.type) {
       case FilterTypes.Date:
         return formatDate(String(value));

package/src/components/Filters/Filters.model.ts

@@ -15,6 +15,7 @@ export interface FilterConfig<T extends Data> {
   label: string;
   property: keyof T;
   type: FilterTypes;
+  selectedValueRenderer?: SelectedValueRenderer;
   onValidate?: FilterValidatorFunction<T>;
 }
 
@@ -105,3 +106,5 @@ export type FilterValidatorFunction<T> = (
   value: FilterValue,
   allValues: FilterValues<T>,
 ) => FilterValidationResult;
+
+export type SelectedValueRenderer = (value: FilterValue) => string;

package/src/components/Filters/Filters.stories.tsx

@@ -153,6 +153,15 @@ const customFilter: FilterType<{ custom: string }> = {
   label: 'Custom Filter (multi select)',
   property: 'custom',
   type: FilterTypes.Custom,
+  selectedValueRenderer: (value: unknown) => {
+    const items = value as string[];
+
+    return String(
+      `${items.length} item${items.length === 1 ? '' : 's'}: ${items
+        .join(', ')
+        .replace(/([a-zA-Z])(\d)/g, '$1 $2')}`,
+    );
+  },
   component: CustomFilterComponent,
 };
 

package/src/components/Filters/Filters.tsx

@@ -134,6 +134,7 @@ export const Filters = <T extends Data>({
         index={index}
         isActive={index === activeFilterIndex}
         onFilterChange={filtersChangedHandler}
+        selectedValueRenderer={filter.selectedValueRenderer}
         onValidate={(currentValue) =>
           filter.onValidate &&
           filter.onValidate(currentValue, activeFilters.current)

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

@@ -203,6 +203,41 @@ describe('FileUploadControl', () => {
     );
   });
 
+  it('allows files with the same name to be uploaded multiple times', () => {
+    const spy = jest.fn();
+
+    const wrapper = mount(
+      <FileUploadControl name={'test-name'} onFileSelected={spy} />,
+    );
+
+    const fileInput = wrapper.find('input[type="file"]');
+
+    // Simulate first file upload
+    fileInput.simulate('change', { target: { files: mockFileList } });
+
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith({
+      file: mockFile,
+      uploadCompleted: expect.any(Function),
+      uploadProgress: expect.any(Function),
+      uploadStarted: expect.any(Function),
+    });
+
+    // Reset spy
+    spy.mockReset();
+
+    // Simulate second file upload with the same file
+    fileInput.simulate('change', { target: { files: mockFileList } });
+
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith({
+      file: mockFile,
+      uploadCompleted: expect.any(Function),
+      uploadProgress: expect.any(Function),
+      uploadStarted: expect.any(Function),
+    });
+  });
+
   describe('MIME Types', () => {
     const mockTypes = 'image/jpeg,image/png';
     const mockFile = new File([new ArrayBuffer(1)], 'image.png', {

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

@@ -169,6 +169,8 @@ export const FileUploadControl: React.FC<FileUploadProps> = ({
               onChange={(event) => {
                 const file = event.target.files?.item(0);
                 file && fileSelected(file);
+                // Reset the value of the input field to ensure onChange fires even with same file
+                event.target.value = '';
               }}
             />
           </>

package/src/components/FormElements/FormElementContainer/FormElementContainer.scss

@@ -18,6 +18,8 @@
     align-self: start;
     font-size: var(--label-font-size, $label-font-size);
     color: var(--input-color, $input-color);
+    max-width: 100%;
+    overflow: auto;
   }
 
   .label {

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

@@ -24,18 +24,20 @@ describe('SingleLineText', () => {
     const spy = jest.fn();
     const mockValue = 'test-value';
     const mockValueUpdated = 'updated-test-value';
-    const wrapper = shallow(
+    const wrapper = mount(
       <SingleLineText name={'test-name'} value={mockValue} onChange={spy} />,
     );
 
     const input = wrapper.find('input');
 
-    expect(input.prop('value')).toEqual(mockValue);
+    expect(input.getDOMNode<HTMLInputElement>().value).toEqual(mockValue);
 
     input.simulate('change', { target: { value: mockValueUpdated } });
 
     expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy).toHaveBeenCalledWith({ target: { value: mockValueUpdated } });
+    expect(spy).toHaveBeenCalledWith(
+      expect.objectContaining({ target: { value: mockValueUpdated } }),
+    );
   });
 
   it('uses optional props when passed in', () => {
@@ -48,7 +50,6 @@ describe('SingleLineText', () => {
       name: 'test-name',
       placeholder: 'test-placeholder',
       type: 'number',
-      value: '',
     } as Record<string, unknown>;
 
     const wrapper = shallow(

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

@@ -57,6 +57,12 @@ export const SingleLineText: React.FC<SingleLineTextProps> = ({
   const DUMMY_PWD = '0000000000';
   const isPasswordField = type === 'password' ? true : false;
 
+  useEffect(() => {
+    if (innerRef.current) {
+      innerRef.current.value = String(value || '');
+    }
+  }, [innerRef, value]);
+
   useEffect(() => {
     if (isPasswordField && isSet) {
       executeIfRefAvailable(innerRef, (input) => {
@@ -99,7 +105,6 @@ export const SingleLineText: React.FC<SingleLineTextProps> = ({
         name={name}
         type={type}
         ref={innerRef}
-        value={value}
         defaultValue={defaultValue}
         disabled={disabled}
         placeholder={disabled ? undefined : placeholder}

package/src/components/List/List.model.ts

@@ -46,6 +46,9 @@ export interface Column<T extends Data> {
 
   /** Specify the horizontal text alignment of the column */
   horizontalColumnAlign?: 'left' | 'center' | 'right';
+
+  /** If set to true, the column will not be resizable */
+  disableResizing?: boolean;
 }
 
 export interface ColumnMap {

package/src/components/List/List.scss

@@ -4,10 +4,8 @@
   @include boxSizing;
 
   height: 100%;
-  min-width: 0px;
   display: grid;
   grid-auto-rows: min-content;
-  row-gap: 3px;
   padding: var(--list-paddings, $list-paddings);
   background-color: var(
     --explorer-background-color,

package/src/components/List/List.stories.tsx

@@ -248,7 +248,7 @@ export const NotSortableColumn: StoryObj<StoryListType> = {
   args: {
     columns: [
       defaultColumns[0],
-      { ...defaultColumns[1], sortable: false },
+      { ...defaultColumns[1], sortable: false, disableResizing: true },
       ...defaultColumns.slice(2),
     ],
   },

package/src/components/List/List.tsx

@@ -24,6 +24,7 @@ import classes from './List.scss';
 import { ListHeader } from './ListHeader/ListHeader';
 import { ListRow } from './ListRow/ListRow';
 import { ListRowLoader } from './ListRow/ListRowLoader';
+import { useColumnsSize } from './useColumnsSize';
 
 export interface ListProps<T extends Data> {
   /**
@@ -104,53 +105,6 @@ export interface ListProps<T extends Data> {
   inlineMenuActions?: (data: T) => ActionData[];
 }
 
-/**
- * Generates a combined string of all columns.columnSize values, to be used as CSS value
- * @param columns The list of columns that should be used
- * @returns a string of all column sizes of the array, combined
- */
-const getColumnsSizeDefinition = function <T extends Data>(
-  columns: Column<T>[],
-  showActionButton: boolean,
-  selectMode: ListSelectMode,
-  showInlineMenu: boolean,
-): string {
-  const columnSizeDefinition = columns.map((column) => column.size ?? '1fr');
-
-  const hasActionsColumn =
-    selectMode !== ListSelectMode.None || showActionButton || showInlineMenu;
-
-  if (hasActionsColumn) {
-    columnSizeDefinition.push(
-      getActionsColumnSizePx(showInlineMenu, showActionButton),
-    );
-  }
-
-  return columnSizeDefinition.join(' ');
-};
-
-const getActionsColumnSizePx = (...enableActions: boolean[]): string => {
-  const enabledActionsCount = enableActions.filter(
-    (actionEnabled) => actionEnabled,
-  ).length;
-
-  const defaultActionSizePx = 50;
-  const defaultActionsRawGapPx = 8;
-  const calculateMultiActionsColumnSizePx = (actionsCount: number): number => {
-    return (
-      defaultActionSizePx * actionsCount +
-      defaultActionsRawGapPx * (actionsCount - 1)
-    );
-  };
-
-  const sizePx =
-    enabledActionsCount > 1
-      ? calculateMultiActionsColumnSizePx(enabledActionsCount)
-      : defaultActionSizePx;
-
-  return `${sizePx}px`;
-};
-
 const noItemsMessage = (
   itemsCount: number,
   isLoading: boolean,
@@ -206,7 +160,7 @@ export const List = <T extends Data>({
   isError = false,
   errorMsg = 'There was an error.',
   handleRetry = true,
-  minimumWidth = '500px',
+  minimumWidth = 'fit-content',
   columnGap = '5px',
   rowGap = '0px',
   headerRowHeight = '44px',
@@ -243,14 +197,19 @@ export const List = <T extends Data>({
     });
   }, [data]);
 
-  const columnSizes = getColumnsSizeDefinition(
-    columns,
-    Boolean(showActionButton),
-    selectionMode,
-    !!inlineMenuActions,
-  );
+  const { columnSizes, resetColumnSizes, setColumnSizes, hasActionColumn } =
+    useColumnsSize(
+      columns,
+      Boolean(showActionButton),
+      selectionMode,
+      Boolean(inlineMenuActions),
+    );
 
-  const customStyles = { gridRowGap: rowGap, minWidth: minimumWidth };
+  const customStyles = {
+    gridRowGap: rowGap,
+    minWidth: minimumWidth,
+    width: '100%',
+  };
 
   const itemSelectionHandler = useCallback(
     (items: ListItem<T>[]) => {
@@ -327,6 +286,9 @@ export const List = <T extends Data>({
         isCheckboxDisabled={listItems.length === 0}
         onCheckboxToggled={headerCheckboxHandler}
         onSortChanged={sortChangedHandler}
+        onResetColumnSizes={resetColumnSizes}
+        onColumnSizesChanged={setColumnSizes}
+        hasActionColumn={hasActionColumn}
       />
       {/* Rows */}
       {listItems.map((item: ListItem<T>, index) => (

package/src/components/List/ListHeader/ListHeader.scss

@@ -3,14 +3,9 @@
 .container {
   padding-left: 5px;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
-  grid-auto-rows: 44px;
-  column-gap: 5px;
-  justify-items: left;
-  align-items: center;
   position: sticky;
   top: 0;
-  z-index: 1;
+  //z-index: 1;
 
   background-color: var(
     --explorer-header-background-color,
@@ -22,11 +17,29 @@
 
   .columnLabel {
     box-sizing: border-box;
-    width: 99%;
+    width: 100%;
     height: 100%;
     display: grid;
-    grid-template-rows: 1fr;
-    grid-template-columns: 1fr;
-    border-right: solid 1px lighten($gray, 15%);
+    grid-template-columns: 1fr auto;
+    position: relative;
+
+    .resizeHandle {
+      cursor: col-resize;
+      width: 7px;
+      height: 100%;
+
+      z-index: 1;
+      border-right: var(--explorer-list-row-border, 1px solid #dddddd);
+      position: absolute;
+      right: 0;
+
+      &:hover:not(.resizeHandleDisabled) {
+        border-width: 3px;
+      }
+
+      &.resizeHandleDisabled {
+        cursor: default;
+      }
+    }
   }
 }

package/src/components/List/ListHeader/ListHeader.spec.tsx

@@ -40,6 +40,9 @@ const mockProps: ListHeaderProps<TestListHeaderData> = {
   actionSize: '50px',
   horizontalTextAlign: 'left',
   verticalTextAlign: 'center',
+  hasActionColumn: true,
+  onResetColumnSizes: jest.fn(),
+  onColumnSizesChanged: jest.fn(),
 };
 
 describe('ListHeader', () => {
@@ -155,4 +158,57 @@ describe('ListHeader', () => {
   });
 
   it.todo('reacts meaningfully when the columns are empty');
+
+  describe('Column Resizing', () => {
+    it('calls onResetColumnSizes when the reset button is clicked', () => {
+      const spy = jest.fn();
+      const wrapper = shallow(
+        <ListHeader {...mockProps} onResetColumnSizes={spy} />,
+      );
+
+      const resetButton = wrapper.find('.resizeHandle').first();
+      resetButton.simulate('doubleClick');
+
+      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(
+        <ListHeader
+          {...mockProps}
+          columns={[
+            { ...mockListColumns[0], disableResizing: true },
+            ...mockListColumns.slice(1),
+          ]}
+          onResetColumnSizes={spy}
+        />,
+      );
+
+      const resetButton = wrapper.find('.resizeHandle').first();
+      resetButton.simulate('doubleClick');
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onColumnSizesChanged when the column is resized', () => {
+      const spy = jest.fn();
+      const wrapper = mount(
+        <ListHeader {...mockProps} onColumnSizesChanged={spy} />,
+      );
+
+      const resizeHandle = wrapper.find('.resizeHandle').first();
+      resizeHandle.invoke('onMouseDown')!({
+        preventDefault: jest.fn(),
+      } as any);
+
+      window.dispatchEvent(
+        new Event('mousemove', {
+          clientX: 100,
+        } as any),
+      );
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+  });
 });