@axinom/mosaic-ui 0.34.0-rc.3 → 0.34.0-rc.31

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/FormElements/Tags/Tags.scss

@@ -119,7 +119,7 @@
 
 .tagEnter {
   opacity: 0;
-  background-color: rgba($blue, 0.25) !important;
+  background-color: var(--tag-enter-color, $tag-enter-color) !important;
 }
 
 .tagEnterActive {

package/src/components/FormElements/ToggleButton/ToggleButton.scss

@@ -18,7 +18,8 @@
 
     &:hover:enabled {
       transition: box-shadow 0.15s ease-in-out 0s;
-      box-shadow: 0 0 0 2px $blue;
+      box-shadow: 0 0 0 2px
+        var(--toggle-button-stroke-color, $toggle-button-stroke-color);
     }
 
     div {
@@ -44,25 +45,35 @@
         }
       }
       &.off {
-        border-top: 1px solid $blue;
-        border-bottom: 1px solid $blue;
-        border-left: 1px solid $blue;
+        border-top: 1px solid
+          var(--toggle-button-stroke-color, $toggle-button-stroke-color);
+        border-bottom: 1px solid
+          var(--toggle-button-stroke-color, $toggle-button-stroke-color);
+        border-left: 1px solid
+          var(--toggle-button-stroke-color, $toggle-button-stroke-color);
       }
       &.on {
-        border: 1px solid $blue;
+        border: 1px solid
+          var(--toggle-button-stroke-color, $toggle-button-stroke-color);
       }
     }
 
     div.active.off {
       svg {
         .svgText {
-          fill: $blue;
+          fill: var(
+            --toggle-button-off-text-color,
+            $toggle-button-off-text-color
+          );
         }
       }
     }
 
     div.active.on {
-      background-color: $blue !important;
+      background-color: var(
+        --toggle-button-on-bg-color,
+        $toggle-button-on-bg-color
+      ) !important;
     }
 
     &:disabled {

package/src/components/FormStation/FormStation.spec.tsx

@@ -5,7 +5,7 @@ import { act } from 'react-dom/test-utils';
 import { MemoryRouter, Route } from 'react-router-dom';
 import * as Yup from 'yup';
 import { noop } from '../../helpers/utils';
-import { IndicatorType, setSaveIndicator } from '../../initialize';
+import { SaveIndicatorType, setSaveIndicator } from '../../initialize';
 import { ActionData, Actions } from '../Actions';
 import { Action } from '../Actions/Action';
 import { MessageBar } from '../MessageBar/MessageBar';
@@ -677,9 +677,12 @@ describe('Details', () => {
       );
       expect(setSaveIndicator).toHaveBeenNthCalledWith(
         1,
-        IndicatorType.Inactive,
-      ); // 1. inactive 2. dirty
-      expect(setSaveIndicator).toHaveBeenNthCalledWith(3, IndicatorType.Dirty); // 1. inactive 2. dirty
+        SaveIndicatorType.Inactive,
+      ); // 1. inactive
+      expect(setSaveIndicator).toHaveBeenNthCalledWith(
+        3,
+        SaveIndicatorType.Dirty,
+      ); // 3. dirty
 
       // submit form
       const actionSelected = wrapper
@@ -697,7 +700,10 @@ describe('Details', () => {
 
       wrapper.update();
 
-      expect(setSaveIndicator).toHaveBeenNthCalledWith(4, IndicatorType.Saving);
+      expect(setSaveIndicator).toHaveBeenNthCalledWith(
+        4,
+        SaveIndicatorType.Saving,
+      );
 
       // complete form submission
       await act(async () => {
@@ -707,7 +713,7 @@ describe('Details', () => {
 
       expect(setSaveIndicator).toHaveBeenNthCalledWith(
         5,
-        IndicatorType.Inactive,
+        SaveIndicatorType.Inactive,
       );
 
       console.warn((setSaveIndicator as jest.Mock).mock.calls);

package/src/components/FormStation/FormStation.tsx

@@ -16,7 +16,7 @@ import React, {
 } from 'react';
 import { useHistory } from 'react-router-dom';
 import { OptionalObjectSchema } from 'yup/lib/object';
-import { IndicatorType, setSaveIndicator } from '../../initialize';
+import { SaveIndicatorType, setSaveIndicator } from '../../initialize';
 import { Data } from '../../types/data';
 import { ErrorTypeToStationError } from '../../utils/ErrorTypeToStationError';
 import { Actions, ActionsProps } from '../Actions';
@@ -155,7 +155,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
 
       try {
         setIsFormSubmitting(true);
-        setSaveIndicator(IndicatorType.Saving);
+        setSaveIndicator(SaveIndicatorType.Saving);
         setStationError(undefined);
         if (!initialData.loading && saveData) {
           const response = await saveData(values, initialData, formikHelpers);
@@ -171,7 +171,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
           ),
         );
 
-        setSaveIndicator(IndicatorType.Dirty);
+        setSaveIndicator(SaveIndicatorType.Dirty);
 
         // We still throw the error, to make sure that navigation or action execution
         // will not continue after a failed save.
@@ -449,15 +449,15 @@ const FormStationHeader: React.FC<
   useEffect(() => {
     // Set the save indicator to dirty depending on the form state
     if (dirty) {
-      setSaveIndicator(IndicatorType.Dirty);
+      setSaveIndicator(SaveIndicatorType.Dirty);
     } else {
-      setSaveIndicator(IndicatorType.Inactive);
+      setSaveIndicator(SaveIndicatorType.Inactive);
     }
     return () => {
       // The form is not always considered "not dirty" after the save
       // so this code will make sure that the indicator is set to inactive
       // when the station is left.
-      setSaveIndicator(IndicatorType.Inactive);
+      setSaveIndicator(SaveIndicatorType.Inactive);
     };
   }, [dirty]);
 

package/src/components/InlineMenu/InlineMenu.scss

@@ -85,10 +85,16 @@ $pop-up-arrow-extrusion: -7px;
 .buttonDefault {
   background-color: transparent !important;
   svg * {
-    stroke: $blue !important;
+    stroke: var(
+      --inline-menu-button-stroke-color,
+      $inline-menu-button-stroke-color
+    ) !important;
   }
   &:hover {
-    background-color: $blue !important;
+    background-color: var(
+      --inline-menu-button-hover-bg-color,
+      $inline-menu-button-hover-bg-color
+    ) !important;
     svg * {
       stroke: white !important;
     }
@@ -98,10 +104,16 @@ $pop-up-arrow-extrusion: -7px;
 .buttonDefaultOpacity {
   background-color: rgba(white, 0.7) !important;
   svg * {
-    stroke: $blue !important;
+    stroke: var(
+      --inline-menu-button-stroke-color,
+      $inline-menu-button-stroke-color
+    ) !important;
   }
   &:hover {
-    background-color: $blue !important;
+    background-color: var(
+      --inline-menu-button-hover-bg-color,
+      $inline-menu-button-hover-bg-color
+    ) !important;
     svg * {
       stroke: white !important;
     }
@@ -109,7 +121,10 @@ $pop-up-arrow-extrusion: -7px;
 }
 
 .buttonSelected {
-  background-color: $blue !important;
+  background-color: var(
+    --inline-menu-button-selected-bg-color,
+    $inline-menu-button-selected-bg-color
+  ) !important;
   svg * {
     stroke: white !important;
   }

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

@@ -4,12 +4,13 @@
   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;
 
   text-decoration: none;
+  overflow: hidden;
 
   color: var(--landingpage-largetile-color, $landingpage-largetile-color);
   background-color: var(
@@ -41,25 +42,29 @@
         $landingpage-largetile-stroke-color
       );
     }
+
+    > * {
+      width: 100%;
+      height: 100%;
+    }
   }
 
   .titlesSection {
     display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
+    padding: 0 15px 15px 15px;
     place-items: center;
     align-self: stretch;
 
     text-align: center;
 
     .label {
-      font-size: 26px;
-      font-weight: regular;
+      font-size: 23px;
+      overflow: hidden;
     }
 
     .subtitle {
       font-size: 16px;
-      margin-bottom: 30px;
+      align-self: end;
     }
   }
 }

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