Fix wrong type component creation

Author: mstijak

packages/cx-theme-aquamarine/package.json

@@ -32,6 +32,7 @@
       "cx": "*"
    },
    "devDependencies": {
+      "cx": "workspace:*",
       "typescript": "^5.9.3"
    }
 }

packages/cx-theme-aquamarine/src/index.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@import "~cx/sass/index";
+@import "~cx/src/index";
 
 $block: map.get($cx-besm, block);
 $element: map.get($cx-besm, element);

packages/cx-theme-aquamarine/src/variables.scss

@@ -284,7 +284,7 @@ $cx-default-progressbar-indicator-background-color: rgba($cx-theme-primary-color
 //list
 $cx-default-list-item-padding: 8px 12px !default;
 
-@import "~cx/sass/variables";
+@import "~cx/src/variables";
 
 //VARIABLE MAPS
 //LIST

packages/cx/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "26.1.0",
+   "version": "26.1.1",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "exports": {
       "./data": {

packages/cx/src/util/Component.spec.ts

@@ -211,6 +211,36 @@ describe("Component.create", function () {
       });
    });
 
+   describe("type in second argument (more)", function () {
+      it("should create instance of type specified in second argument", function () {
+         const result = TestWidget.create({ text: "hello" }, { type: TestButton });
+         assert.ok(result instanceof TestButton);
+         assert.equal(result.text, "hello");
+      });
+
+      it("should create instance of $type specified in second argument", function () {
+         const result = TestWidget.create({ text: "world" }, { $type: TestButton });
+         assert.ok(result instanceof TestButton);
+         assert.equal(result.text, "world");
+      });
+
+      it("should work when first argument is an array and second has type", function () {
+         const results = Component.create([{ text: "A" }, { text: "B" }], { type: TestButton });
+         assert.equal(results.length, 2);
+         assert.ok(results[0] instanceof TestButton);
+         assert.ok(results[1] instanceof TestButton);
+         assert.equal(results[0].text, "A");
+         assert.equal(results[1].text, "B");
+      });
+
+      it("should work when type is passed as first arg with array config and type in more", function () {
+         const results = Component.create(TestWidget, [{ text: "X" }], { type: TestButton });
+         assert.equal(results.length, 1);
+         assert.ok(results[0] instanceof TestButton);
+         assert.equal(results[0].text, "X");
+      });
+   });
+
    describe("heterogeneous array with type property", function () {
       it("creates array of different component types", function () {
          const results = Component.create([

packages/cx/src/util/Component.ts

@@ -268,6 +268,11 @@ export class Component {
 
       if (more) cfg = Object.assign({}, config, more);
 
+      // Check if merged cfg has type/$type that should override cmpType
+      // Only redirect if cfgType is a class (not a string alias or factory) to prevent infinite recursion
+      let cfgType = cfg && (cfg.type || cfg.$type);
+      if (cfgType && cfgType.isComponentType && cfgType !== cmpType) return this.create(cfg);
+
       let cmp = new cmpType(cfg);
       if (cmpType.autoInit && cmp.init) cmp.init();
       return cmp;

yarn.lock

@@ -3981,6 +3981,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "cx-theme-aquamarine@workspace:packages/cx-theme-aquamarine"
   dependencies:
+    cx: "workspace:*"
     typescript: "npm:^5.9.3"
   peerDependencies:
     cx: "*"