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

package/src/components/LandingPageTiles/TileLarge/TileLarge.scss

@@ -4,7 +4,7 @@
   height: 100%;
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: 2fr 1fr;
+  grid-template-rows: 130px 1fr;
   grid-column: span 4;
   grid-row: span 2;
   place-items: center;
@@ -41,12 +41,17 @@
         $landingpage-largetile-stroke-color
       );
     }
+
+    > * {
+      width: 100%;
+      height: 100%;
+    }
   }
 
   .titlesSection {
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
+    grid-template-rows: 3fr 1fr;
     place-items: center;
     align-self: stretch;
 
@@ -59,7 +64,6 @@
 
     .subtitle {
       font-size: 16px;
-      margin-bottom: 30px;
     }
   }
 }

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);
+    });
+  });
 });

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

@@ -5,6 +5,7 @@ import { Column, SortData } from '../List.model';
 import { ListCheckBox } from '../ListCheckBox/ListCheckBox';
 import { ColumnLabel } from './ColumnLabel/ColumnLabel';
 import classes from './ListHeader.scss';
+import { useResize } from './useResize';
 
 export interface ListHeaderProps<T extends Data> {
   /** Column definitions */
@@ -37,6 +38,12 @@ export interface ListHeaderProps<T extends Data> {
   onSortChanged?: (sort: SortData<T>) => void;
   /** CSS Class name for additional styles */
   className?: string;
+  /** called when the column sizes should be reset */
+  onResetColumnSizes: () => void;
+  /** called when the column sizes should be updated */
+  onColumnSizesChanged: (columnSizes: string) => void;
+  /** Whether or not the list has an action column */
+  hasActionColumn: boolean;
 }
 
 /**
@@ -66,6 +73,9 @@ export const ListHeader = <T extends Data>({
   onCheckboxToggled,
   onSortChanged,
   className = '',
+  onResetColumnSizes,
+  onColumnSizesChanged,
+  hasActionColumn,
 }: PropsWithChildren<ListHeaderProps<T>>): JSX.Element => {
   const customStyles = {
     gridAutoRows: rowHeight,
@@ -75,15 +85,18 @@ export const ListHeader = <T extends Data>({
     alignItems: verticalTextAlign,
   } as React.CSSProperties;
 
+  const { cols, mouseDown } = useResize(columns, onColumnSizesChanged);
+
   return (
     <div
       className={clsx(classes.container, 'list-header-container', className)}
       style={customStyles}
       data-test-id="list-header"
     >
-      {columns.map((column) => (
+      {columns.map((column, i) => (
         <div
           key={column.propertyName as string}
+          ref={cols[i].ref}
           className={clsx(classes.columnLabel)}
         >
           <ColumnLabel<T>
@@ -94,16 +107,37 @@ export const ListHeader = <T extends Data>({
             sortData={sortData}
             onSortChanged={onSortChanged}
           />
+          <div
+            onMouseDown={
+              !column.disableResizing
+                ? (e) => {
+                    e.preventDefault();
+                    mouseDown(i);
+                  }
+                : undefined
+            }
+            onDoubleClick={() => onResetColumnSizes()}
+            className={clsx(classes.resizeHandle, {
+              [classes.resizeHandleDisabled]: column.disableResizing,
+            })}
+          />
         </div>
       ))}
-      {showItemCheckbox && (
-        <ListCheckBox
-          height={actionSize}
-          width={actionSize}
-          isChecked={itemSelected}
-          isDisabled={isCheckboxDisabled}
-          onCheckBoxToggled={onCheckboxToggled}
-        />
+      {hasActionColumn && (
+        <div
+          ref={cols[cols.length - 1].ref}
+          className={clsx(classes.columnLabel)}
+        >
+          {showItemCheckbox && (
+            <ListCheckBox
+              height={actionSize}
+              width={actionSize}
+              isChecked={itemSelected}
+              isDisabled={isCheckboxDisabled}
+              onCheckBoxToggled={onCheckboxToggled}
+            />
+          )}
+        </div>
       )}
     </div>
   );

package/src/components/List/ListHeader/useResize.ts

@@ -0,0 +1,108 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Data } from '../../../types';
+import { Column } from '../List.model';
+
+/**
+ * Handles the resizing logic of the columns
+ * @param columns The list of column definitions
+ * @param onColumnSizesChanged Callback that will be called when the column sizes change
+ * @returns an object containing the refs to the columns (add these to all column header elements)
+ *          and the mouseDown handler (add this to the element that should be used to resize the column)
+ */
+export const useResize = <T extends Data>(
+  columns: Column<T>[],
+  onColumnSizesChanged: (columnSizes: string) => void,
+): {
+  cols: {
+    ref: React.RefObject<HTMLTableCellElement>;
+    orgSize: string | undefined;
+  }[];
+  mouseDown: (index: number) => void;
+} => {
+  const minCellWidth = 50;
+
+  const cols = useMemo(
+    () =>
+      [
+        ...columns,
+        { size: 'auto' }, // Last column for action buttons and checkbox, etc
+      ].map((col) => ({
+        ref: React.createRef<HTMLTableCellElement>(),
+        orgSize: col.size,
+      })),
+    [columns],
+  );
+
+  const [activeIndex, setActiveIndex] = useState<number | undefined>(undefined);
+  const resizeStart = React.useRef<
+    { mouse: number; width: number } | undefined
+  >(undefined);
+
+  const mouseMove = useCallback(
+    (e) => {
+      if (activeIndex !== undefined) {
+        const elem = cols[activeIndex].ref.current;
+        if (!elem) {
+          return;
+        }
+
+        if (!resizeStart.current) {
+          resizeStart.current = {
+            mouse: e.clientX,
+            width: elem.offsetWidth,
+          };
+        }
+
+        const start = resizeStart.current;
+        if (!start) {
+          return;
+        }
+
+        const gridColumns = cols.map((col, i) => {
+          if (!col.ref.current) {
+            return col.orgSize;
+          }
+
+          if (i === activeIndex) {
+            const width = start.width + e.clientX - start.mouse;
+            if (width >= minCellWidth) {
+              return `${width}px`;
+            }
+          }
+          return `${col.ref.current.offsetWidth}px`;
+        });
+
+        onColumnSizesChanged(gridColumns.join(' '));
+      }
+    },
+    [activeIndex, cols, onColumnSizesChanged],
+  );
+
+  const mouseDown = (index: number): void => {
+    setActiveIndex(index);
+  };
+
+  const removeListeners = useCallback(() => {
+    window.removeEventListener('mousemove', mouseMove);
+    window.removeEventListener('mouseup', removeListeners);
+  }, [mouseMove]);
+
+  const mouseUp = useCallback(() => {
+    setActiveIndex(undefined);
+    resizeStart.current = undefined;
+    removeListeners();
+  }, [setActiveIndex, removeListeners]);
+
+  useEffect(() => {
+    if (activeIndex !== undefined) {
+      window.addEventListener('mousemove', mouseMove);
+      window.addEventListener('mouseup', mouseUp);
+    }
+
+    return () => {
+      removeListeners();
+    };
+  }, [activeIndex, mouseMove, mouseUp, removeListeners]);
+
+  return { cols, mouseDown };
+};

package/src/components/List/ListRow/ListRow.scss

@@ -3,9 +3,6 @@
 .columnsRoot {
   padding: 1px 0px 1px 5px;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
-  grid-auto-rows: 50px;
-  column-gap: 5px;
   justify-items: left;
   align-items: center;
   border-bottom: var(--explorer-list-row-border, $explorer-list-row-border);
@@ -30,6 +27,13 @@
     }
   }
 
+  .cellWrapper {
+    display: grid;
+    align-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
   .cell {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -47,15 +51,7 @@
   }
 
   .link {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
-    column-gap: 5px;
-
-    width: 100%;
-
-    justify-items: left;
-    align-items: center;
-
+    display: contents;
     color: inherit;
     text-decoration: none;
   }

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

@@ -51,7 +51,7 @@ describe('ListRow', () => {
         <ListRow {...mockProps} columns={expectedColumns} />,
       );
 
-      const actualColumns = wrapper.find('.cell');
+      const actualColumns = wrapper.find('.cellWrapper');
 
       // Check amount of rendered columns
       expect(actualColumns).toHaveLength(expectedColumns.length);
@@ -87,7 +87,7 @@ describe('ListRow', () => {
       />,
     );
 
-    const actualColumns = wrapper.find('.cell');
+    const actualColumns = wrapper.find('.cellWrapper');
     // Check amount of rendered columns
     expect(actualColumns).toHaveLength(2);
 
@@ -119,21 +119,21 @@ describe('ListRow', () => {
       // @ts-expect-error Typings to not match up
       <ListRow {...mockProps} data={rowData} columns={expectedColumns} />,
     );
-    const actualColumns = wrapper.find('.cell');
+    const actualColumns = wrapper.find('.cellWrapper');
     expect(actualColumns.at(0).text()).toBe('Changed: something');
   });
 
   it('shows empty field if a value required in a column is not present on the data object', () => {
     const expectedColumns: Column<TestExplorerData>[] = [
       // @ts-expect-error intentional bad property
-      { propertyName: 'doesnt exist', size: '1fr', label: 'desc' },
+      { propertyName: "doesn't exist", size: '1fr', label: 'desc' },
     ];
 
     const wrapper = shallow(
       <ListRow {...mockProps} columns={expectedColumns} />,
     );
 
-    const actualColumns = wrapper.find('.cell');
+    const actualColumns = wrapper.find('.cellWrapper');
 
     // Check amount of rendered columns
     expect(actualColumns).toHaveLength(1);
@@ -514,22 +514,6 @@ describe('ListRow', () => {
 
       expect(link.exists()).toBe(false);
     });
-
-    it('receives list row height', () => {
-      const height = '55px';
-      const wrapper = shallow(
-        <ListRow
-          {...mockProps}
-          onItemClicked="http://this.is.a.test.url"
-          selectionMode={ListSelectMode.None}
-          rowHeight={height}
-        />,
-      );
-
-      const link = wrapper.find(Link);
-
-      expect(link.prop('style')?.gridTemplateRows).toBe(height);
-    });
   });
 
   describe('tooltip', () => {