@axinom/mosaic-ui 0.38.0-rc.3 → 0.38.0-rc.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.38.0-rc.3",
+  "version": "0.38.0-rc.5",
   "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.11-rc.3",
+    "@axinom/mosaic-core": "^0.4.11-rc.5",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -104,5 +104,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "88fa77642747812f10543b7ee9f0aa1e58d5ecdf"
+  "gitHead": "8a9ad3cb8a296d5ef91e45bc07c4f0836f82dead"
 }

package/src/components/DynamicDataList/DynamicDataList.model.ts

@@ -1,19 +1,42 @@
 import { Data } from '../../types/data';
 import { ColumnRenderer } from '../List/List.model';
 
-export interface DynamicListColumn<T extends Data> {
+interface UnboundColumn<T extends Data> extends BaseColumn<T> {
+  /** The name of the property on the Data object that should be rendered in that column. */
+  propertyName?: keyof T;
+  /**
+   * A custom render function that will be called for every row(except data entry row) that should be rendered.
+   * The DynamicDataList will already try to render the data in a meaningful way, but in some advanced use cases more control is required.
+   */
+  render: ColumnRenderer<T>;
+
+  /**
+   * The identifier for the column.
+   */
+  key: string;
+}
+
+interface BoundColumn<T extends Data> extends BaseColumn<T> {
   /** The name of the property on the Data object that should be rendered in that column. */
   propertyName: keyof T;
-  /** The width of the column as CSS size (default: 1fr) */
-  size?: string;
-  /** Column's header label */
-  label?: string;
+
   /**
    * A custom render function that will be called for every row(except data entry row) that should be rendered.
    * The DynamicDataList will already try to render the data in a meaningful way, but in some advanced use cases more control is required.
-   * @memberof Column
    */
   render?: ColumnRenderer<T>;
+
+  /**
+   * The identifier for the column. (Default: propertyName)
+   */
+  key?: string;
+}
+
+export interface BaseColumn<T extends Data> {
+  /** The width of the column as CSS size (default: 1fr) */
+  size?: string;
+  /** Column's header label */
+  label?: string;
   /**
    * If set to false, will not render a tooltip for the column data (default: undefined)
    * If a custom renderer is used that will not return a value cast-able to a string, you should consider setting this property to false and add a title attribute on the component returned by the custom renderer.
@@ -39,6 +62,10 @@ export interface DynamicListColumn<T extends Data> {
   disableResizing?: boolean;
 }
 
+export type DynamicListColumn<T extends Data> =
+  | UnboundColumn<T>
+  | BoundColumn<T>;
+
 export type DynamicListDataEntryRenderer = (
   /** Value to render. */
   currentValue: unknown,

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

@@ -119,7 +119,21 @@ export default meta;
 export const Default: StoryObj<StoryDDLType> = {
   args: {
     ...defaultProps,
-    positionPropertyName: 'position',
+  },
+};
+
+export const UnboundColumn: StoryObj<StoryDDLType> = {
+  args: {
+    ...defaultProps,
+    columns: [
+      ...defaultColumns,
+      {
+        label: 'Unbound',
+        render: () => 'Unbound',
+        key: 'unbound',
+        size: '150px',
+      },
+    ],
   },
 };
 

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

@@ -158,7 +158,7 @@ export const DynamicListDataEntry = <T extends Data>({
 
     let transformedState: T = state;
     for (const { onAddTransformer, propertyName } of columns) {
-      if (onAddTransformer) {
+      if (onAddTransformer && propertyName) {
         transformedState = {
           ...transformedState,
           [propertyName]: onAddTransformer(
@@ -217,9 +217,12 @@ export const DynamicListDataEntry = <T extends Data>({
         >
           {renderField<T>(
             column,
-            state[column.propertyName],
+            column.propertyName && state[column.propertyName],
             error[column.propertyName as string],
-            (value) => valueChangedHandler(column.propertyName, value),
+            column.propertyName
+              ? (value) =>
+                  valueChangedHandler(column.propertyName as keyof T, value)
+              : noop,
             disabled,
             mode,
           )}

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

@@ -97,7 +97,7 @@ export const DynamicListHeader = <T extends Data>({
       )}
       {columns.map((column, i) => (
         <div
-          key={column.propertyName as string}
+          key={column.key ?? (column.propertyName as string)}
           className={clsx(classes.column)}
           ref={cols[i].ref}
           data-test-id={`dynamic-list-header-property:${

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.tsx

@@ -165,11 +165,7 @@ export const DynamicListRow = <T extends Data>({
         </div>
       )}
       {columns.map((column: DynamicListColumn<T>) => {
-        const columnData: React.ReactNode = renderData<T>(
-          column,
-          data,
-          column.propertyName,
-        );
+        const columnData: React.ReactNode = renderData<T>(column, data);
 
         return (
           <div
@@ -177,13 +173,13 @@ export const DynamicListRow = <T extends Data>({
               [classes.editable]:
                 column.dataEntryRender !== undefined && allowEditing,
             })}
-            key={column.propertyName as string}
+            key={column.key ?? (column.propertyName as string)}
           >
             <div
               className={classes.column}
               title={
                 column.tooltip !== false
-                  ? getTooltipText(data[column.propertyName])
+                  ? getTooltipText(columnData)
                   : undefined
               }
               data-test-id={`dynamic-list-property:${
@@ -229,9 +225,11 @@ export const DynamicListRow = <T extends Data>({
 const renderData = function <T extends Data>(
   column: DynamicListColumn<T>,
   data: T,
-  propertyName: keyof T,
 ): React.ReactNode {
-  const value: unknown = data[propertyName];
+  if (!column.propertyName) {
+    return column.render!(undefined, data);
+  }
+  const value: unknown = data[column.propertyName];
   if (column.render) {
     return column.render(value, data);
   }

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

@@ -18,9 +18,40 @@ export interface ColumnSortKeys {
   descending: string;
 }
 
-export interface Column<T extends Data> {
+interface UnboundColumn<T extends Data> extends BaseColumn<T> {
+  /** The name of the property on the Data object that should be rendered in that column. */
+  propertyName?: keyof T;
+  /**
+   * A custom render function that will be called for every row that should be rendered.
+   * The List will already try to render the data in a meaningful way, but in some advanced use cases more control is required.
+   * @memberof Column
+   */
+  render: ColumnRenderer<T>;
+
+  /**
+   * The identifier for the column.
+   */
+  key: string;
+}
+
+interface BoundColumn<T extends Data> extends BaseColumn<T> {
   /** The name of the property on the Data object that should be rendered in that column. */
   propertyName: keyof T;
+
+  /**
+   * A custom render function that will be called for every row that should be rendered.
+   * The List will already try to render the data in a meaningful way, but in some advanced use cases more control is required.
+   * @memberof Column
+   */
+  render?: ColumnRenderer<T>;
+
+  /**
+   * The identifier for the column. (Default: propertyName)
+   */
+  key?: string;
+}
+
+interface BaseColumn<T extends Data> {
   /** The width of the column as CSS size (default: 1fr) */
   size?: string;
   /** Column's header label */
@@ -51,6 +82,8 @@ export interface Column<T extends Data> {
   disableResizing?: boolean;
 }
 
+export type Column<T extends Data> = UnboundColumn<T> | BoundColumn<T>;
+
 export interface ColumnMap {
   [key: string]: string;
 }

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

@@ -165,6 +165,24 @@ export const Default: StoryObj<StoryListType> = {
     }),
 };
 
+export const WithUnboundColumn: StoryObj<StoryListType> = {
+  name: 'With unbound column',
+  args: {
+    columns: [
+      ...defaultColumns,
+      {
+        // Columns don't have to be bound to a property.
+        // They can also just define a renderer and infer the cell data from the row data.
+        label: 'Unbound',
+        render: (_, data) => <span>{data.desc.substring(15, 20)}</span>,
+        key: 'unbound',
+        size: '100px',
+      },
+    ],
+  },
+  render: Default.render,
+};
+
 export const Navigating: StoryObj<StoryListType> = {
   name: 'Navigating using DOM links',
   args: {

package/src/components/List/List.tsx

@@ -155,7 +155,7 @@ const useSort = <T,>(
  */
 export const List = <T extends Data>({
   columns,
-  data,
+  data = [],
   isLoading = false,
   isError = false,
   errorMsg = 'There was an error.',

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

@@ -4,11 +4,12 @@ import { noop } from '../../../../helpers/utils';
 import { ColumnSortKeys, SortData } from '../../List.model';
 import classes from './ColumnLabel.scss';
 
-export interface ColumnLabelProps<T> {
-  /** Data object's property name associated with this column */
-  propertyName: keyof T;
+interface ColumnLabelProps<T> {
   /** Column label */
   label?: string;
+  /** Data object's property name associated with this column */
+  propertyName: keyof T | undefined;
+
   /** If set to false, disables sorting for this column (default: true) */
   sortable?: boolean;
   /** If set, allow to directly specify which sorting enum value to use */
@@ -20,15 +21,15 @@ export interface ColumnLabelProps<T> {
 }
 
 export const ColumnLabel = <T,>({
-  propertyName,
   label,
+  propertyName,
   sortable = true,
   columnSortKeys,
   sortData,
   onSortChanged = noop,
 }: PropsWithChildren<ColumnLabelProps<T>>): JSX.Element => {
   /** Creates sort data object to be emitted back on change event. */
-  const getSortDir = (): SortData<T> => {
+  const getSortDir = (propertyName: keyof T): SortData<T> => {
     if (sortData?.column === propertyName && sortData.direction === 'asc') {
       return {
         column: propertyName,
@@ -46,9 +47,9 @@ export const ColumnLabel = <T,>({
 
   /** Determines if the current column is currently being used to sort and which direction. */
   const direction =
-    sortData?.column === propertyName ? sortData.direction : undefined;
+    sortData?.column === propertyName ? sortData?.direction : undefined;
 
-  if (!sortable) {
+  if (!propertyName || !sortable) {
     return (
       <div
         className={classes.container}
@@ -62,7 +63,9 @@ export const ColumnLabel = <T,>({
       <div className={classes.container}>
         <div
           className={clsx(classes.clickWrapper, classes.sortable)}
-          onClick={() => onSortChanged(getSortDir())}
+          onClick={
+            propertyName && (() => onSortChanged(getSortDir(propertyName)))
+          }
           data-test-id={`list-label:${String(propertyName)}`}
           data-test-sort-dir={direction ?? 'none'}
         >

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

@@ -95,7 +95,7 @@ export const ListHeader = <T extends Data>({
     >
       {columns.map((column, i) => (
         <div
-          key={column.propertyName as string}
+          key={column.key ?? (column.propertyName as string)}
           ref={cols[i].ref}
           className={clsx(classes.columnLabel)}
         >

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

@@ -84,9 +84,11 @@ setLocale(navigator.language);
 function renderData<T extends Data>(
   column: Column<T>,
   rowData: T,
-  propertyName: keyof T,
 ): React.ReactNode {
-  const value: unknown = rowData[propertyName];
+  if (!column.propertyName) {
+    return column.render!(undefined, rowData);
+  }
+  const value: unknown = rowData[column.propertyName];
   if (column.render) {
     return column.render(value, rowData);
   }
@@ -197,14 +199,13 @@ export const ListRow = <T extends Data>({
     typeof onItemClicked !== 'function';
 
   const generateCells: JSX.Element[] = columns.map((column: Column<T>) => {
-    const columnData: React.ReactNode = renderData<T>(
-      column,
-      data,
-      column.propertyName,
-    );
+    const columnData: React.ReactNode = renderData<T>(column, data);
 
     return (
-      <div key={column.propertyName as string} className={classes.cellWrapper}>
+      <div
+        key={column.key ?? (column.propertyName as string)}
+        className={classes.cellWrapper}
+      >
         <div
           className={classes.cell}
           title={