@dile/crud 2.6.4 → 2.7.2

package/components/list/src/DileCrudList.js

@@ -7,6 +7,7 @@ import '../../list/crud-list-pagination-links.js';
 import '../crud-list-item.js';
 import '../crud-select-all.js';
 import '../crud-list-service.js';
+import '../crud-data-grid.js';
 import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 
 export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
@@ -67,9 +68,14 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
             }
             .elements-container {
                 display: grid;
-                grid-template-columns: var(--dile-crud-list-elements-container-template-columns,  minmax(0, 1fr));
+                grid-template-columns: var(--dile-crud-list-elements-container-template-columns, minmax(0, 1fr));
                 gap: var(--dile-crud-list-elements-container-gap, 0);
             }
+            .grid-container {
+                display: block;
+                width: 100%;
+                margin: var(--dile-crud-list-grid-container-margin, 0 0 1rem 0);
+            }
         `
     ];
 
@@ -94,7 +100,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
 
     constructor() {
         super();
-        this.paginationData = {}
+        this.paginationData = {};
         this.elements = [];
         this.pageSize = 10;
         this.keyword = '';
@@ -207,6 +213,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
             ></dile-ajax>
         `;
     }
+
     get emptyTemplate() {
         return html`
             <div class="empty">
@@ -243,6 +250,33 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
     }
 
     get elementsTemplate() {
+        if (this.config?.templates?.grid && typeof this.config.templates.grid === 'function') {
+            return html`
+                <div
+                    class="grid-container"
+                    @item-checkbox-changed=${this.onItemsCheckboxChanged}
+                    @dile-data-grid-sort=${this.onGridSort}
+                >
+                    ${this.config.templates.grid(this.elements, this.actionIds, this.config, this.sort)}
+                </div>
+            `;
+        }
+        if (this.config?.grid?.columns && Array.isArray(this.config.grid.columns)) {
+            return html`
+                <div
+                    class="grid-container"
+                    @item-checkbox-changed=${this.onItemsCheckboxChanged}
+                    @dile-data-grid-sort=${this.onGridSort}
+                >
+                    <dile-crud-data-grid
+                        .items=${this.elements}
+                        .selectedIds=${this.actionIds}
+                        .config=${this.config}
+                        .sort=${this.sort}
+                    ></dile-crud-data-grid>
+                </div>
+            `;
+        }
         return html`
             <div class="elements-container">
                 ${this.elements.map(element => html`
@@ -252,7 +286,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
                         .actionIds="${this.actionIds}"
                         ?disableEdit=${!this.isItemEditable(element)}
                         ?disableDelete=${!this.isItemDeletable(element)}
-                        ?disableRestore=${this.config?.customization?.disableRestore}
+                        ?disableRestore=${this.config?.customization?.disableRestore || this.config?.customization?.disableListActions}
                         ?hideCheckboxSelection="${this.config?.customization?.hideCheckboxSelection}"
                         @item-checkbox-changed=${this.onItemsCheckboxChanged}
                         ?isDeleted=${element.deleted_at}
@@ -276,13 +310,13 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
     }
 
     isItemEditable(element) {
-        const isGloballyDisabled = this.config?.customization?.disableEdit;
+        const isGloballyDisabled = this.config?.customization?.disableListActions || this.config?.customization?.disableEdit;
         const isItemEditable = this.config?.isItemEditable(element) ?? true;
         return !isGloballyDisabled && isItemEditable;
     }
 
     isItemDeletable(element) {
-        const isGloballyDisabled = this.config?.customization?.disableDelete;
+        const isGloballyDisabled = this.config?.customization?.disableListActions || this.config?.customization?.disableDelete;
         const isItemDeletable = this.config?.isItemDeletable(element) ?? true;
         return !isGloballyDisabled && isItemDeletable;
     }
@@ -314,11 +348,11 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
     }
 
     goNext() {
-        this.elservice.goNext()
+        this.elservice.goNext();
     }
 
     goPrev() {
-        this.elservice.goPrev()
+        this.elservice.goPrev();
     }
 
     refresh() {
@@ -332,7 +366,6 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
             this.shadowRoot.querySelector('dile-crud-select-all').reset();
         }
         this.elservice.refresh();
-        
     }    
 
     setKeyword(keyword) {
@@ -345,7 +378,26 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
         this.loading = true;
         this.sort = sortObject;
         this.elservice.setSort(sortObject);
-    }  
+        this.dispatchEvent(new CustomEvent('crud-list-sort-changed', {
+            bubbles: true,
+            composed: true,
+            detail: sortObject,
+        }));
+    }
+
+    onGridSort(e) {
+        if (e.detail?.field) {
+            this.setSort({
+                sortField: e.detail.field,
+                sortDirection: e.detail.direction || 'asc',
+            });
+        } else {
+            this.setSort({
+                sortField: null,
+                sortDirection: null,
+            });
+        }
+    }
 
     setPageSize(size) {
         this.loading = true;
@@ -389,7 +441,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
       if(this.config.customization?.disablePagination) {
         let ids = this.elements.map(item => this.config.computeItemId(item));
         this.dispactSelectAll(ids);
-      } else{
+      } else {
         let data = {
             keyword: this.keyword,
             filters: this.filters,
@@ -413,7 +465,6 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
         if (!e.detail.checked && this.isSelectAllActive) {
             this.shadowRoot.querySelector('dile-crud-select-all').resetWithoutDispatch();
         }
-        
     }
 
     onListError(e) {

package/components/list/src/DileCrudListItem.js

@@ -1,67 +1,42 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, nothing } from 'lit';
 import '@dile/ui/components/checkbox/checkbox.js';
-import '@dile/ui/components/button/button.js';
-import '@dile/iconlib/material-icons/edit.js';
-import '@dile/iconlib/material-icons/delete.js';
-import '@dile/iconlib/material-icons/restore-from-trash.js';
+import '../crud-item-actions.js';
 
 export class DileCrudListItem extends LitElement {
   static styles = [
     css`
-        :host {
-            display: var(--dile-crud-list-item-display, block);
-            max-width: var(--dile-crud-list-item-max-width, 100%);
-            width: var(--dile-crud-list-item-width, 100%);
-        }
+      :host {
+        display: var(--dile-crud-list-item-display, block);
+        max-width: var(--dile-crud-list-item-max-width, 100%);
+        width: var(--dile-crud-list-item-width, 100%);
+      }
+      section {
+        max-width: 100%;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        padding: var(--dile-crud-list-item-padding, 0.5rem 0.5rem);
+        border-bottom: var(--dile-crud-list-item-line-separator, 1px solid #ddd);
+      }
+      dile-checkbox {
+        margin-right: 0.5rem;
+        --dile-checkbox-unchecked-color: #888;
+      }
+      main {
+        flex-grow: 1;
+        overflow: hidden;
+      }
+      .actions {
+        margin-left: 0.5rem;
+        display: flex;
+        align-items: center;
+        text-align: right;
+      }
+      @media (min-width: 550px) {
         section {
-            max-width: 100%;
-            overflow: hidden;
-            display: flex;
-            align-items: center;
-            padding: var(--dile-crud-list-item-padding, 0.5rem 0.5rem);
-            border-bottom: var(--dile-crud-list-item-line-separator, 1px solid #ddd);
-        }
-        dile-checkbox {
-            margin-right: 0.5rem;
-            --dile-checkbox-unchecked-color: #888;
-        }
-        main {
-            flex-grow: 1;
-            overflow: hidden;
-        }
-        .actions {
-            margin-left: 0.5rem;
-            display: flex;
-            align-items: center;
-            text-align: right;
-        }
-        dile-button.action-button {
-            --dile-button-background-color: var(--dile-crud-list-item-action-button-background-color, transparent);
-            --dile-button-border-color: var(--dile-crud-list-item-action-button-border-color, transparent);
-            --dile-button-hover-background-color: var(--dile-crud-list-item-action-button-hover-background-color, var(--dile-neutral-color, transparent));
-            --dile-button-hover-border-color: var(--dile-crud-list-item-action-button-hover-border-color, transparent);
-            --dile-button-padding-y: var(--dile-crud-list-item-action-button-padding-y, 0.25rem);
-            --dile-button-padding-x: var(--dile-crud-list-item-action-button-padding-x, 0.25rem);
-            --dile-button-icon-size: var(--dile-crud-list-item-action-button-icon-size, 24px);
-            --dile-button-border-radius: var(--dile-crud-list-item-action-button-border-radius, 2rem);
-        }
-        dile-button.action-button.edit {
-            --dile-button-icon-color: var(--edit-icon-color, var(--dile-alert-neutral-color, #2889a7));
-            --dile-button-icon-hover-color: var(--dile-crud-list-item-edit-icon-hover-color, var(--edit-icon-color, var(--dile-alert-neutral-color, #2889a7)));
-        }
-        dile-button.action-button.delete {
-            --dile-button-icon-color: var(--delete-icon-color, var(--dile-danger-color, #e33));
-            --dile-button-icon-hover-color: var(--dile-crud-list-item-delete-icon-hover-color, var(--delete-icon-color, var(--dile-danger-color, #e33)));
-        }
-        dile-button.action-button.restore {
-            --dile-button-icon-color: var(--restore-icon-color, var(--dile-alert-success-color, #00900f));
-            --dile-button-icon-hover-color: var(--dile-crud-list-item-restore-icon-hover-color, var(--restore-icon-color, var(--dile-alert-success-color, #00900f)));
-        }
-        @media(min-width: 550px) {
-            section {
-                padding: var(--dile-crud-list-item-padding, 0.5rem 1rem);
-            }
+          padding: var(--dile-crud-list-item-padding, 0.5rem 1rem);
         }
+      }
     `
   ];
 
@@ -72,6 +47,7 @@ export class DileCrudListItem extends LitElement {
       actionIds: { type: Array },
       disableEdit: { type: Boolean },
       disableDelete: { type: Boolean },
+      disableRestore: { type: Boolean },
       /** Hide checkboxes on the item list */
       hideCheckboxSelection: { type: Boolean },
       isDeleted: { type: Boolean },
@@ -85,86 +61,64 @@ export class DileCrudListItem extends LitElement {
     this.disableDelete = false;
     this.disableRestore = false;
     this.hideCheckboxSelection = false;
+    this.isDeleted = false;
+  }
 
+  get hasActions() {
+    if (this.isDeleted) {
+      return !this.disableRestore;
+    }
+    return !this.disableEdit || !this.disableDelete;
   }
 
   render() {
     return html`
-        <section>
-            ${this.hideCheckboxSelection ? '' : html`
-                <dile-checkbox ?checked="${this.includes(this.actionIds, this.itemId)}" @dile-checkbox-changed=${this.checkboxChanged}></dile-checkbox>
+      <section>
+        ${this.hideCheckboxSelection
+          ? ''
+          : html`
+              <dile-checkbox
+                ?checked="${this.includes(this.actionIds, this.itemId)}"
+                @dile-checkbox-changed=${this.checkboxChanged}
+              ></dile-checkbox>
             `}
-            <main>
-                <slot></slot>
-            </main>
-            <div class="actions">
-                ${this.isDeleted
-                  ? this.restoreActionsTemplate
-                  : this.regularActionsTemplate
-                }
-            </div>
-        </section>
+        <main>
+          <slot></slot>
+        </main>
+        ${this.hasActions
+          ? html`
+              <div class="actions">
+                <dile-crud-item-actions
+                  .item=${this.item}
+                  itemId="${this.itemId}"
+                  ?disableEdit=${this.disableEdit}
+                  ?disableDelete=${this.disableDelete}
+                  ?disableRestore=${this.disableRestore}
+                  ?isDeleted=${this.isDeleted}
+                ></dile-crud-item-actions>
+              </div>
+            `
+          : nothing
+        }
+      </section>
     `;
   }
 
-  get regularActionsTemplate() {
-    return html`
-      ${this.disableEdit
-        ? ''
-        : html`<dile-button class="action-button edit" icon="material.edit" label="Edit" @click=${this.editClick}></dile-button>`
-      }
-      ${this.disableDelete
-        ? ''
-        : html`<dile-button class="action-button delete" icon="material.delete" label="Delete" @click=${this.deleteClick}></dile-button>`
-      }
-    `
-  }
-
-  get restoreActionsTemplate() {
-    return html`
-      ${this.disableRestore
-        ? ''
-        : html`<dile-button class="action-button restore" icon="material.restore-from-trash" label="Restore" @click=${this.restoreClick}></dile-button>`
-      }
-    `
-  }
-
   includes(actionIds, itemId) {
     const stringIds = actionIds.map(String);
     return stringIds.includes(String(itemId));
   }
 
   checkboxChanged(e) {
-    this.dispatchEvent(new CustomEvent('item-checkbox-changed', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        checked: e.detail.checked,
-        itemId: this.itemId
-      }
-    }));
-  }
-
-  _dispatchItemEvent(eventName) {
-    this.dispatchEvent(new CustomEvent(eventName, {
-      bubbles: true,
-      composed: true,
-      detail: {
-        item: this.item,
-        itemId: this.itemId,
-      }
-    }));
-  }
-
-  editClick() {
-    this._dispatchItemEvent('crud-item-edit');
-  }
-
-  deleteClick() {
-    this._dispatchItemEvent('crud-item-delete');
-  }
-
-  restoreClick() {
-    this._dispatchItemEvent('crud-item-restore');
+    this.dispatchEvent(
+      new CustomEvent('item-checkbox-changed', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          checked: e.detail.checked,
+          itemId: this.itemId,
+        },
+      })
+    );
   }
-}
+}

package/components/ui/crud-sort-form.spec.js

@@ -0,0 +1,132 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './crud-sort-form.js';
+
+describe('dile-crud-sort-form', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  const sortOptions = [
+    { name: 'name', label: 'Name', direction: 'asc' },
+    { name: 'id', label: 'Id', direction: 'asc' },
+  ];
+
+  async function createSortForm(props = {}) {
+    const el = document.createElement('dile-crud-sort-form');
+    el.sortOptions = props.sortOptions ?? sortOptions;
+    if (props.sortField !== undefined) {
+      el.sortField = props.sortField;
+    }
+    document.body.appendChild(el);
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders one radio/order-switch pair per configured sort option', async () => {
+    const el = await createSortForm();
+    expect(el.shadowRoot.querySelectorAll('dile-radio').length).toBe(2);
+    expect(el.shadowRoot.querySelectorAll('dile-order-switch').length).toBe(2);
+  });
+
+  it('getDirection returns the configured direction for a known field', async () => {
+    const el = await createSortForm();
+    await el.shadowRoot.querySelector('dile-order-switch[name="name"]').updateComplete;
+    expect(el.getDirection('name')).toBe('asc');
+  });
+
+  it('getDirection returns undefined instead of throwing for a field with no matching order-switch', async () => {
+    // Reproduces a DataGrid column marked sortable whose field isn't listed in config.sort.options.
+    const el = await createSortForm();
+    expect(() => el.getDirection('continent')).not.toThrow();
+    expect(el.getDirection('continent')).toBeUndefined();
+  });
+
+  it('getDirection returns undefined for a falsy field without touching the DOM', async () => {
+    const el = await createSortForm();
+    expect(el.getDirection(null)).toBeUndefined();
+    expect(el.getDirection('')).toBeUndefined();
+  });
+
+  // "year" has a static configured direction of "desc" so it can expose the regression:
+  // syncing an "asc" sort must not get silently corrected back to "desc".
+  const yearOptions = [{ name: 'year', label: 'Year', direction: 'desc' }];
+
+  it('syncSort reflects an externally-applied sort without re-dispatching sort-changed', async () => {
+    const el = await createSortForm({ sortOptions: yearOptions });
+
+    let dispatchCount = 0;
+    el.addEventListener('sort-changed', () => { dispatchCount++; });
+
+    el.syncSort('year', 'asc');
+    await el.updateComplete;
+
+    expect(el.sortField).toBe('year');
+    expect(el.sortDirection).toBe('asc');
+    expect(dispatchCount).toBe(0);
+  });
+
+  it('a genuine radio-group selection (not preceded by syncSort) still defaults to the option configured direction', async () => {
+    const el = await createSortForm({ sortOptions: yearOptions });
+
+    let receivedDetail = null;
+    el.addEventListener('sort-changed', (e) => { receivedDetail = e.detail; });
+
+    const radioGroup = el.shadowRoot.querySelector('dile-radio-group');
+    radioGroup.dispatchEvent(new CustomEvent('dile-radio-group-changed', {
+      detail: { name: 'selector', value: 'year' },
+    }));
+    await el.updateComplete;
+
+    expect(el.sortField).toBe('year');
+    expect(el.sortDirection).toBe('desc');
+    expect(receivedDetail).toEqual({ sortField: 'year', sortDirection: 'desc' });
+  });
+
+  it('clicking the label of an inactive option switches to it using its own configured direction, without flipping it', async () => {
+    const el = await createSortForm({
+      sortOptions: [
+        { name: 'name', label: 'Name', direction: 'asc' },
+        { name: 'year', label: 'Year', direction: 'desc' },
+      ],
+      sortField: 'name',
+    });
+    el.sortDirection = 'asc';
+    await el.updateComplete;
+
+    let receivedDetail = null;
+    el.addEventListener('sort-changed', (e) => { receivedDetail = e.detail; });
+
+    el.shadowRoot.querySelector('dile-order-switch[name="year"]').shadowRoot.querySelector('span').click();
+    await el.updateComplete;
+
+    expect(el.sortField).toBe('year');
+    expect(el.sortDirection).toBe('desc'); // year's own configured default, not flipped
+    expect(receivedDetail).toEqual({ sortField: 'year', sortDirection: 'desc' });
+  });
+
+  it('clicking the label of the already-active option toggles its direction instead of doing nothing', async () => {
+    // Reproduces the reported confusion: clicking "Name" again while already sorted by
+    // name silently did nothing, because the label always re-announced the same value.
+    const el = await createSortForm({
+      sortOptions: [{ name: 'name', label: 'Name', direction: 'asc' }],
+      sortField: 'name',
+    });
+    el.sortDirection = 'asc';
+    await el.updateComplete;
+
+    let receivedDetail = null;
+    el.addEventListener('sort-changed', (e) => { receivedDetail = e.detail; });
+
+    const label = () => el.shadowRoot.querySelector('dile-order-switch[name="name"]').shadowRoot.querySelector('span');
+
+    label().click();
+    await el.updateComplete;
+    expect(el.sortField).toBe('name');
+    expect(el.sortDirection).toBe('desc'); // toggled, not a no-op
+    expect(receivedDetail).toEqual({ sortField: 'name', sortDirection: 'desc' });
+
+    label().click();
+    await el.updateComplete;
+    expect(el.sortDirection).toBe('asc'); // toggles back on a second click
+  });
+});

package/components/ui/src/DileCrudSortForm.js

@@ -45,6 +45,19 @@ export class DileCrudSortForm extends DileI18nMixin(LitElement) {
   constructor() {
     super();
     this.sortOptions = [];
+    this._suppressChangeEcho = false;
+  }
+
+  // Reflects a sort that was already applied elsewhere (e.g. a DataGrid column header
+  // click) without re-dispatching sort-changed. Setting `sortField` below causes the
+  // inner <dile-radio-group> to echo a "changed" event on its own (it can't tell a
+  // programmatic update from a user click), which radioGroupChanged() would otherwise
+  // treat as a real selection and re-derive sortDirection from the option's *static*
+  // configured default — silently overriding whichever direction was actually requested.
+  syncSort(sortField, sortDirection) {
+    this._suppressChangeEcho = true;
+    this.sortField = sortField;
+    this.sortDirection = sortDirection;
   }
 
   render() {
@@ -63,10 +76,11 @@ export class DileCrudSortForm extends DileI18nMixin(LitElement) {
                             ?checked=${this.sortField === option.name}
                             value="${option.name}"
                         ></dile-radio>
-                        <dile-order-switch 
-                            label="${option.label}" 
-                            name="${option.name}" 
-                            value="${option.direction}" 
+                        <dile-order-switch
+                            label="${option.label}"
+                            name="${option.name}"
+                            value="${option.direction}"
+                            ?selected=${this.sortField === option.name}
                             @element-changed=${this.elementChanged}
                         ></dile-order-switch>
                     </div>
@@ -83,6 +97,10 @@ export class DileCrudSortForm extends DileI18nMixin(LitElement) {
   }
 
   radioGroupChanged(e) {
+    if (this._suppressChangeEcho) {
+      this._suppressChangeEcho = false;
+      return;
+    }
     this.sortField = e.detail.value;
     this.sortDirection = this.getDirection(this.sortField);
     this.dispatchChanged();
@@ -90,7 +108,8 @@ export class DileCrudSortForm extends DileI18nMixin(LitElement) {
 
   getDirection(field) {
     if(field) {
-      return this.shadowRoot.querySelector(`dile-order-switch[name="${field}"]`).value;
+      const orderSwitch = this.shadowRoot.querySelector(`dile-order-switch[name="${field}"]`);
+      return orderSwitch ? orderSwitch.value : undefined;
     }
   }
 

package/lib/CrudConfigBuilder.spec.js

@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest';
+import { CrudConfigBuilder } from './CrudConfigBuilder.js';
+
+describe('CrudConfigBuilder', () => {
+  it('merges customConfig.grid.columns over the default null grid', () => {
+    const columns = [{ field: 'id', header: 'ID' }];
+
+    const config = new CrudConfigBuilder('https://example.test/api/items', {
+      grid: { columns },
+    }).getConfig();
+
+    expect(config.grid.columns).toEqual(columns);
+  });
+
+  it('sets the endpoint from the constructor argument', () => {
+    const config = new CrudConfigBuilder('https://example.test/api/items', {}).getConfig();
+
+    expect(config.endpoint).toBe('https://example.test/api/items');
+  });
+
+  it('getConfig(endpoint) returns a copy with an overridden endpoint without mutating the original config', () => {
+    const builder = new CrudConfigBuilder('https://example.test/api/items', {
+      grid: { columns: [{ field: 'id' }] },
+    });
+
+    const relatedConfig = builder.getConfig('https://example.test/api/items/1/related');
+
+    expect(relatedConfig.endpoint).toBe('https://example.test/api/items/1/related');
+    expect(builder.getConfig().endpoint).toBe('https://example.test/api/items');
+    expect(relatedConfig.grid.columns).toEqual([{ field: 'id' }]);
+  });
+});

package/lib/deepMerge.spec.js

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest';
+import { deepMerge } from './deepMerge.js';
+
+describe('deepMerge', () => {
+  it('replaces a null target property with a plain object from source', () => {
+    const target = { grid: null };
+    const source = { grid: { columns: [{ field: 'id' }] } };
+
+    const result = deepMerge(target, source);
+
+    expect(result.grid).toEqual({ columns: [{ field: 'id' }] });
+  });
+
+  it('preserves array order and content when merging a columns array under a previously-null key', () => {
+    const columns = [
+      { field: 'id', header: 'ID' },
+      { field: 'name', header: 'Name' },
+      { field: 'continent', header: 'Continent' },
+    ];
+
+    const result = deepMerge({ grid: null }, { grid: { columns } });
+
+    expect(result.grid.columns).toEqual(columns);
+    expect(result.grid.columns).not.toBe(columns);
+  });
+
+  it('does not mutate the source when merging into a null target key', () => {
+    const source = { grid: { columns: [{ field: 'id' }] } };
+
+    const result = deepMerge({ grid: null }, source);
+    result.grid.columns.push({ field: 'extra' });
+
+    expect(source.grid.columns.length).toBe(1);
+  });
+
+  it('overwrites configured overwriteProperties instances as-is instead of merging them', () => {
+    class Adapter {}
+    const targetAdapter = new Adapter();
+    const sourceAdapter = new Adapter();
+
+    const result = deepMerge({ responseAdapter: targetAdapter }, { responseAdapter: sourceAdapter });
+
+    expect(result.responseAdapter).toBe(sourceAdapter);
+  });
+});