@descope-ui/common 0.0.14 → 0.0.15

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.15](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.14...@descope-ui/common-0.0.15) (2025-06-29)
+
 ## [0.0.14](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.13...@descope-ui/common-0.0.14) (2025-06-26)
 
 ## [0.0.13](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.12...@descope-ui/common-0.0.13) (2025-06-09)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/common",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "dependencies": {
     "element-internals-polyfill": "^1.3.9",
     "color": "^4.2.3",

package/src/componentsMixins/mixins/createDynamicDataMixin.js

@@ -1,7 +1,8 @@
-import { observeAttributes } from '../helpers/componentHelpers';
+import { observeAttributes } from '../../componentsHelpers';
 
 const defaultValidateSchema = () => true;
-const defaultItemRenderer = (item) => `<pre>${JSON.stringify(item, null, 4)}</pre>`;
+const defaultItemRenderer = (item) =>
+  `<pre>${JSON.stringify(item, null, 4)}</pre>`;
 
 const createTemplate = (templateString) => {
   const template = document.createElement('template');
@@ -30,11 +31,15 @@ export const createDynamicDataMixin =
     validateSchema = defaultValidateSchema,
     slotName,
     rerenderAttrsList = [],
+    targetSelector,
+    sortFn
   }) =>
   (superclass) =>
     class DynamicDataMixinClass extends superclass {
       #data = [];
 
+      #targetEle;
+
       // eslint-disable-next-line class-methods-use-this
       #validateSchema(data) {
         if (!validateSchema) return true;
@@ -50,20 +55,24 @@ export const createDynamicDataMixin =
 
       #removeOldItems() {
         const selector = slotName ? `*[slot="${slotName}"]` : ':not([slot])';
-        this.baseElement.querySelectorAll(selector).forEach((item) => item.remove());
+        if (!this.#targetEle) return;
+        this.#targetEle
+          .querySelectorAll(selector)
+          .forEach((item) => item.remove());
       }
 
       #renderItems() {
         this.#removeOldItems();
         this.data.forEach((item, index) => {
           const content = getTemplateContent(itemRenderer(item, index, this));
-          this.baseElement.appendChild(content?.cloneNode(true));
+          if (!this.#targetEle) return;
+          this.#targetEle.appendChild(content?.cloneNode(true));
         });
       }
 
       set data(value) {
         if (this.#validateSchema(value)) {
-          this.#data = value;
+          this.#data = sortFn ? value.sort(sortFn) : value;
           this.#renderItems();
         }
       }
@@ -75,13 +84,17 @@ export const createDynamicDataMixin =
       init() {
         super.init?.();
 
+        this.#targetEle = targetSelector
+          ? this.shadowRoot.querySelector(targetSelector)
+          : this.baseElement;
+
         observeAttributes(
           this,
           (attrs) => {
             if (attrs.includes('data')) this.#handleDataAttr();
             else this.#renderItems();
           },
-          { includeAttrs: [...rerenderAttrsList, 'data'] }
+          { includeAttrs: [...rerenderAttrsList, 'data'] },
         );
       }
 

package/src/componentsMixins/mixins/index.js

@@ -13,3 +13,4 @@ export { inputEventsDispatchingMixin } from './inputEventsDispatchingMixin';
 export { externalInputMixin } from './externalInputMixin';
 export { componentsContextMixin } from './componentsContextMixin';
 export { connectorMixin } from './connectorMixin';
+export { createDynamicDataMixin } from './createDynamicDataMixin';