fix(core): transform breaks fixed position in tiles (#9905)

projects/core/components/expand/expand.style.less

@@ -14,7 +14,6 @@
 
     &._expanded {
         opacity: 1;
-        transform: translate3d(0, 0, 0);
     }
 
     &._loading {

projects/demo/src/modules/components/tree/examples/8/index.html

@@ -0,0 +1,44 @@
+<tui-tree
+    class="tree"
+    [childrenHandler]="handler"
+    [class._dragged]="drag()"
+    [content]="content"
+    [tuiTreeController]="true"
+    [value]="data"
+>
+    <ng-template
+        #content
+        let-value
+    >
+        <ng-template #parent>
+            {{ value.text }}
+        </ng-template>
+
+        <div
+            *ngIf="!value.children; else parent"
+            class="wrapper"
+        >
+            <div
+                class="drop"
+                (pointerup)="onDrop(value)"
+            ></div>
+
+            <tui-tiles class="tiles">
+                <tui-tile>
+                    <div
+                        tuiTileHandle
+                        class="content"
+                        (pointerdown)="onDrag(value)"
+                    >
+                        {{ value.text }}
+                    </div>
+                </tui-tile>
+            </tui-tiles>
+
+            <div
+                class="drop"
+                (pointerup)="onDrop(value, 1)"
+            ></div>
+        </div>
+    </ng-template>
+</tui-tree>

projects/demo/src/modules/components/tree/examples/8/index.less

@@ -0,0 +1,37 @@
+.tree._dragged {
+    .drop {
+        pointer-events: auto;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+}
+
+.wrapper {
+    position: relative;
+    inline-size: 100%;
+}
+
+.content {
+    display: flex;
+    inline-size: 100%;
+    align-items: center;
+}
+
+.tiles {
+    inline-size: 100%;
+    grid-template-rows: 1.5rem;
+}
+
+.drop {
+    position: absolute;
+    z-index: 1;
+    inline-size: 100%;
+    block-size: 0.5rem;
+    margin-top: -0.25rem;
+    background: #87ceeb;
+    border-radius: 1rem;
+    opacity: 0;
+    pointer-events: none;
+}

projects/demo/src/modules/components/tree/examples/8/index.ts

@@ -0,0 +1,104 @@
+import {NgIf} from '@angular/common';
+import {ChangeDetectorRef, Component, inject, signal} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import type {TuiHandler} from '@taiga-ui/cdk';
+import {EMPTY_ARRAY} from '@taiga-ui/cdk';
+import {TuiTiles, TuiTree} from '@taiga-ui/kit';
+
+interface TreeNode {
+    children?: readonly TreeNode[];
+    text: string;
+}
+
+@Component({
+    standalone: true,
+    imports: [NgIf, TuiTiles, TuiTree],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected drag = signal<TreeNode | null>(null);
+
+    protected readonly cd = inject(ChangeDetectorRef);
+
+    protected readonly data: TreeNode = {
+        text: 'Topmost',
+        children: [
+            {
+                text: 'Top level 1',
+                children: [
+                    {
+                        text: 'Another item',
+                        children: [
+                            {text: 'Next level 1'},
+                            {text: 'Next level 2'},
+                            {text: 'Next level 3'},
+                        ],
+                    },
+                ],
+            },
+            {text: 'Top level 2'},
+            {
+                text: 'Top level 3',
+                children: [{text: 'Test 1'}, {text: 'Test 2'}],
+            },
+        ],
+    };
+
+    protected readonly handler: TuiHandler<TreeNode, readonly TreeNode[]> = (item) =>
+        item.children || EMPTY_ARRAY;
+
+    protected onDrag(drag: TreeNode): void {
+        this.drag.set(drag);
+    }
+
+    protected onDrop(target: TreeNode, position = 0): void {
+        const drag = this.drag();
+
+        if (!drag) {
+            return;
+        }
+
+        const dragParent = findParent(drag, this.data);
+        const targetParent = findParent(target, this.data);
+
+        if (dragParent) {
+            dragParent.children = dragParent?.children?.filter((item) => item !== drag);
+        }
+
+        const index = (targetParent?.children?.indexOf(target) ?? 0) + position;
+
+        if (targetParent?.children) {
+            targetParent.children = [
+                ...targetParent.children.slice(0, index),
+                drag,
+                ...targetParent.children.slice(index),
+            ];
+        }
+
+        this.drag.set(null);
+    }
+}
+
+function findParent(item: TreeNode, node: TreeNode): TreeNode | null {
+    if (!node.children) {
+        return null;
+    }
+
+    if (node.children.includes(item)) {
+        return node;
+    }
+
+    for (const iterateItem of node.children) {
+        const parent = findParent(item, iterateItem);
+
+        if (parent) {
+            return parent;
+        }
+    }
+
+    return null;
+}

projects/demo/src/modules/components/tree/index.html

@@ -54,6 +54,13 @@
             [component]="7 | tuiComponent"
             [content]="7 | tuiExample"
         />
+
+        <tui-doc-example
+            id="drag"
+            heading="Drag and drop"
+            [component]="8 | tuiComponent"
+            [content]="8 | tuiExample"
+        />
     </ng-template>
 
     <ng-template pageTab>