@astral/ui 4.99.2 → 4.101.0

package/node/components/InfiniteTreeList/utils/getIdsToKeep/getIdsToKeep.d.ts

@@ -0,0 +1,10 @@
+import type { InfiniteTreeChildrenPagination, InfiniteTreeListData } from '../../types';
+/**
+ * Собирает id узлов, которые нужно оставить при очистке: те, до которых можно
+ * дойти по данным списка.
+ *
+ * Обход идёт сверху вниз: от `items` к их загруженным дочерним элементам и
+ * дальше вглубь. Поэтому ветка, отрезанная сменой набора данных, в результат
+ * не попадёт, даже если её дочерние элементы ещё лежат в загруженных
+ */
+export declare const getIdsToKeep: <TData extends InfiniteTreeListData<TData>>(items: TData[], childrenStateMap: Record<string, InfiniteTreeChildrenPagination<TData>>) => Set<string>;

package/node/components/InfiniteTreeList/utils/getIdsToKeep/getIdsToKeep.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getIdsToKeep = void 0;
+/**
+ * Собирает id узлов, которые нужно оставить при очистке: те, до которых можно
+ * дойти по данным списка.
+ *
+ * Обход идёт сверху вниз: от `items` к их загруженным дочерним элементам и
+ * дальше вглубь. Поэтому ветка, отрезанная сменой набора данных, в результат
+ * не попадёт, даже если её дочерние элементы ещё лежат в загруженных
+ */
+const getIdsToKeep = (items, childrenStateMap) => {
+    const idsToKeep = new Set();
+    const queue = [...items];
+    while (queue.length > 0) {
+        const item = queue.pop();
+        if (!item || idsToKeep.has(item.id)) {
+            continue;
+        }
+        idsToKeep.add(item.id);
+        if (item.children?.length) {
+            queue.push(...item.children);
+        }
+        const loadedChildren = childrenStateMap[item.id]?.data;
+        if (loadedChildren?.length) {
+            queue.push(...loadedChildren);
+        }
+    }
+    return idsToKeep;
+};
+exports.getIdsToKeep = getIdsToKeep;

package/node/components/InfiniteTreeList/utils/getIdsToKeep/index.d.ts

@@ -0,0 +1 @@
+export * from './getIdsToKeep';

package/node/components/InfiniteTreeList/utils/getIdsToKeep/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./getIdsToKeep"), exports);

package/node/components/InfiniteTreeList/{useLogic/utils → utils}/getInitialExpandedIds/getInitialExpandedIds.d.ts

@@ -1,5 +1,7 @@
-import type { InfiniteTreeListData } from '../../../types';
+import type { InfiniteTreeListData } from '../../types';
 /**
- * Получает начальный набор раскрытых узлов
+ * Получает начальный набор раскрытых узлов.
+ * Узел с подгружаемыми дочерними элементами раскрывается наравне
+ * со статической веткой
  */
 export declare const getInitialExpandedIds: <TData extends InfiniteTreeListData<TData>>(prev: Set<string>, items: TData[], initialExpandedLevel?: number, currentLevel?: number) => Set<string>;

package/node/components/InfiniteTreeList/{useLogic/utils → utils}/getInitialExpandedIds/getInitialExpandedIds.js

@@ -2,21 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getInitialExpandedIds = void 0;
 /**
- * Получает начальный набор раскрытых узлов
+ * Получает начальный набор раскрытых узлов.
+ * Узел с подгружаемыми дочерними элементами раскрывается наравне
+ * со статической веткой
  */
 const getInitialExpandedIds = (prev, items, initialExpandedLevel, currentLevel = 0) => {
     const expandedIds = new Set(prev);
-    // Более точная проверка
     if (initialExpandedLevel === undefined) {
         return expandedIds;
     }
     const shouldExpand = currentLevel < initialExpandedLevel;
     items.forEach((item) => {
-        if (shouldExpand && item.children) {
+        const hasNested = Boolean(item.children) || item.hasChildren === true;
+        if (shouldExpand && hasNested) {
             if (!prev?.has(item.id)) {
                 expandedIds.add(item.id);
             }
-            // Рекурсивно обрабатываем существующих детей
             if (item.children?.length) {
                 const childExpandedIds = (0, exports.getInitialExpandedIds)(prev, item.children, initialExpandedLevel, currentLevel + 1);
                 childExpandedIds.forEach((id) => expandedIds.add(id));

package/node/components/InfiniteTreeList/utils/getNestedItems/getNestedItems.d.ts

@@ -0,0 +1,6 @@
+import type { FlattenTree, InfiniteTreeListData } from '../../types';
+/**
+ * Собирает вложенные строки узла из плоского списка.
+ * Свёрнутых веток в списке нет
+ */
+export declare const getNestedItems: <TData extends InfiniteTreeListData<TData>>(flatList: FlattenTree<TData>[], parentId: string) => FlattenTree<TData>[];

package/node/components/InfiniteTreeList/utils/getNestedItems/getNestedItems.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNestedItems = void 0;
+/**
+ * Собирает вложенные строки узла из плоского списка.
+ * Свёрнутых веток в списке нет
+ */
+const getNestedItems = (flatList, parentId) => {
+    const result = [];
+    const collectChildren = (id) => {
+        const children = flatList.filter((item) => item.meta.parentId === id);
+        children.forEach((child) => {
+            result.push(child);
+            if (child.meta.isExpanded) {
+                collectChildren(child.id);
+            }
+        });
+    };
+    collectChildren(parentId);
+    return result;
+};
+exports.getNestedItems = getNestedItems;

package/node/components/InfiniteTreeList/utils/getNestedItems/index.d.ts

@@ -0,0 +1 @@
+export * from './getNestedItems';

package/node/components/InfiniteTreeList/{useLogic/utils/getDescendants → utils/getNestedItems}/index.js

@@ -14,4 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./getDescendants"), exports);
+__exportStar(require("./getNestedItems"), exports);

package/node/components/InfiniteTreeList/utils/index.d.ts

@@ -0,0 +1,20 @@
+export * from './checkHasSkeletonPlaceholders';
+export * from './checkIsChildrenPlaceholder';
+export * from './checkIsChildrenPlaceholderOf';
+export * from './checkIsDirectChild';
+export * from './checkIsNoDataChildren';
+export * from './checkIsSameChildren';
+export * from './countDirectChildren';
+export * from './createParentSlots';
+export * from './createTailRegistry';
+export * from './flattenChildren';
+export * from './flattenTree';
+export * from './getEnteringChildren';
+export * from './getIdsToKeep';
+export * from './getInitialExpandedIds';
+export * from './getNestedItems';
+export * from './insertChildren';
+export * from './removeChildren';
+export * from './sortCollapsed';
+export * from './startRemoveAnimation';
+export * from './syncChildrenPlaceholders';

package/node/components/InfiniteTreeList/utils/index.js

@@ -0,0 +1,36 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./checkHasSkeletonPlaceholders"), exports);
+__exportStar(require("./checkIsChildrenPlaceholder"), exports);
+__exportStar(require("./checkIsChildrenPlaceholderOf"), exports);
+__exportStar(require("./checkIsDirectChild"), exports);
+__exportStar(require("./checkIsNoDataChildren"), exports);
+__exportStar(require("./checkIsSameChildren"), exports);
+__exportStar(require("./countDirectChildren"), exports);
+__exportStar(require("./createParentSlots"), exports);
+__exportStar(require("./createTailRegistry"), exports);
+__exportStar(require("./flattenChildren"), exports);
+__exportStar(require("./flattenTree"), exports);
+__exportStar(require("./getEnteringChildren"), exports);
+__exportStar(require("./getIdsToKeep"), exports);
+__exportStar(require("./getInitialExpandedIds"), exports);
+__exportStar(require("./getNestedItems"), exports);
+__exportStar(require("./insertChildren"), exports);
+__exportStar(require("./removeChildren"), exports);
+__exportStar(require("./sortCollapsed"), exports);
+__exportStar(require("./startRemoveAnimation"), exports);
+__exportStar(require("./syncChildrenPlaceholders"), exports);

package/node/components/InfiniteTreeList/utils/insertChildren/index.d.ts

@@ -0,0 +1 @@
+export * from './insertChildren';

package/node/components/InfiniteTreeList/utils/insertChildren/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./insertChildren"), exports);

package/node/components/InfiniteTreeList/utils/insertChildren/insertChildren.d.ts

@@ -0,0 +1,5 @@
+import type { FlattenTree, InfiniteTreeListData } from '../../types';
+/**
+ * Вставляет дочерние элементы после родителя в плоский список.
+ */
+export declare const insertChildren: <TData extends InfiniteTreeListData<TData>>(flatList: FlattenTree<TData>[], parentId: string, childrenData: TData[], expandedIds: Set<string>) => FlattenTree<TData>[];

package/node/components/InfiniteTreeList/utils/insertChildren/insertChildren.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.insertChildren = void 0;
+const checkIsDirectChild_1 = require("../checkIsDirectChild");
+const flattenChildren_1 = require("../flattenChildren");
+const getNestedItems_1 = require("../getNestedItems");
+/**
+ * Возвращает прямых дочерних элементов родителя из плоского списка
+ */
+const getDirectChildren = (flatList, parentId) => flatList.filter((item) => (0, checkIsDirectChild_1.checkIsDirectChild)(item, parentId));
+/**
+ * Вставляет дочерние элементы после родителя в плоский список.
+ */
+const insertChildren = (flatList, parentId, childrenData, expandedIds) => {
+    const parentIndex = flatList.findIndex((item) => item.id === parentId);
+    if (parentIndex === -1) {
+        return flatList;
+    }
+    const parent = flatList[parentIndex];
+    const nextChildren = (0, flattenChildren_1.flattenChildren)(childrenData, parent, expandedIds);
+    const existingDirect = getDirectChildren(flatList, parentId);
+    const sameBranch = existingDirect.length === nextChildren.length &&
+        existingDirect.every((item, index) => item.id === nextChildren[index]?.id);
+    if (sameBranch) {
+        return flatList;
+    }
+    const nestedItems = (0, getNestedItems_1.getNestedItems)(flatList, parentId);
+    const nextBranch = [];
+    nextChildren.forEach((child) => {
+        nextBranch.push(child);
+        const sourceChild = childrenData.find((item) => item.id === child.id);
+        const isNestedFlattened = Boolean(child.meta.isExpanded && sourceChild?.children?.length);
+        if (!isNestedFlattened) {
+            nextBranch.push(...(0, getNestedItems_1.getNestedItems)(flatList, child.id));
+        }
+    });
+    const branchEnd = parentIndex + 1 + nestedItems.length;
+    return [
+        ...flatList.slice(0, parentIndex),
+        { ...parent, children: childrenData },
+        ...nextBranch,
+        ...flatList.slice(branchEnd),
+    ];
+};
+exports.insertChildren = insertChildren;

package/node/components/InfiniteTreeList/utils/removeChildren/index.d.ts

@@ -0,0 +1 @@
+export * from './removeChildren';

package/node/components/InfiniteTreeList/utils/removeChildren/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./removeChildren"), exports);

package/node/components/InfiniteTreeList/utils/removeChildren/removeChildren.d.ts

@@ -0,0 +1,5 @@
+import type { FlattenTree, InfiniteTreeListData } from '../../types';
+/**
+ * Удаляет дочерние элементы родителя из плоского списка и сворачивает родителя
+ */
+export declare const removeChildren: <TData extends InfiniteTreeListData<TData>>(flatList: FlattenTree<TData>[], parentId: string) => FlattenTree<TData>[];

package/node/components/InfiniteTreeList/utils/removeChildren/removeChildren.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeChildren = void 0;
+const getNestedItems_1 = require("../getNestedItems");
+/**
+ * Удаляет дочерние элементы родителя из плоского списка и сворачивает родителя
+ */
+const removeChildren = (flatList, parentId) => {
+    const descendantIds = new Set((0, getNestedItems_1.getNestedItems)(flatList, parentId).map((item) => item.id));
+    return flatList
+        .filter((item) => !descendantIds.has(item.id))
+        .map((item) => item.id === parentId
+        ? { ...item, meta: { ...item.meta, isExpanded: false } }
+        : item);
+};
+exports.removeChildren = removeChildren;

package/node/components/InfiniteTreeList/utils/sortCollapsed/sortCollapsed.d.ts

@@ -0,0 +1,5 @@
+import type { FlattenTree, InfiniteTreeListData } from '../../types';
+/**
+ * Сортирует элементы для корректной последовательности анимации при сворачивании
+ */
+export declare const sortCollapsed: <TData extends InfiniteTreeListData<TData>>(items: FlattenTree<TData>[]) => FlattenTree<TData>[];

package/node/components/InfiniteTreeList/{useLogic/utils → utils}/sortCollapsed/sortCollapsed.js

@@ -2,12 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sortCollapsed = void 0;
 /**
- * Сортирует элементы для корректной последовательности анимации при сворачивании.
- * Сначала более глубокие уровни, затем по индексу среди соседей.
- *
- * @typeParam T - тип данных элемента дерева
- * @param items - элементы в формате `FlattenTree<T>`
- * @returns Отсортированный массив `FlattenTree<T>`
+ * Сортирует элементы для корректной последовательности анимации при сворачивании
  */
 const sortCollapsed = (items) => {
     return [...items].sort((a, b) => {

package/node/components/InfiniteTreeList/utils/startRemoveAnimation/index.d.ts

@@ -0,0 +1 @@
+export * from './startRemoveAnimation';

package/node/components/InfiniteTreeList/utils/startRemoveAnimation/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./startRemoveAnimation"), exports);

package/node/components/InfiniteTreeList/utils/startRemoveAnimation/startRemoveAnimation.d.ts

@@ -0,0 +1 @@
+export declare const startRemoveAnimation: (nodeId: string) => void;

package/node/components/InfiniteTreeList/utils/startRemoveAnimation/startRemoveAnimation.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.startRemoveAnimation = void 0;
+const constants_1 = require("../../constants");
+const startRemoveAnimation = (nodeId) => {
+    const treeItem = document.getElementById(nodeId);
+    treeItem?.classList.add(constants_1.infiniteTreeListClassnames.rowRemoveAnimation);
+};
+exports.startRemoveAnimation = startRemoveAnimation;

package/node/components/InfiniteTreeList/utils/syncChildrenPlaceholders/index.d.ts

@@ -0,0 +1 @@
+export * from './syncChildrenPlaceholders';

package/node/components/InfiniteTreeList/utils/syncChildrenPlaceholders/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./syncChildrenPlaceholders"), exports);

package/node/components/InfiniteTreeList/utils/syncChildrenPlaceholders/syncChildrenPlaceholders.d.ts

@@ -0,0 +1,11 @@
+import type { FlattenTree, InfiniteTreeListData } from '../../types';
+/**
+ * Возвращает id строк-заглушек, которые получит родитель.
+ */
+export declare const getChildrenPlaceholderIds: (parentId: string, count: number) => string[];
+/**
+ * Приводит строки-заглушки ветки родителя к состоянию загрузки её дочерних
+ * элементов:
+ * ставит нужный вид заглушки, меняет его или убирает заглушки совсем
+ */
+export declare const syncChildrenPlaceholders: <TData extends InfiniteTreeListData<TData>>(flatList: FlattenTree<TData>[], parentId: string, isLoading: boolean, skeletonCount: number, isError?: boolean, isNoData?: boolean) => FlattenTree<TData>[];

package/node/components/InfiniteTreeList/utils/syncChildrenPlaceholders/syncChildrenPlaceholders.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.syncChildrenPlaceholders = exports.getChildrenPlaceholderIds = void 0;
+const checkIsChildrenPlaceholderOf_1 = require("../checkIsChildrenPlaceholderOf");
+const checkIsDirectChild_1 = require("../checkIsDirectChild");
+const countDirectChildren_1 = require("../countDirectChildren");
+const getNestedItems_1 = require("../getNestedItems");
+/**
+ * Возвращает стабильный id строки-заглушки для родителя.
+ */
+const getPlaceholderId = (parentId, index) => `loader-${parentId}-${index}`;
+/**
+ * Возвращает стабильный id строки-заглушки «Нет данных».
+ */
+const getNoDataId = (parentId) => `no-data-${parentId}`;
+/**
+ * Возвращает id строк-заглушек, которые получит родитель.
+ */
+const getChildrenPlaceholderIds = (parentId, count) => Array.from({ length: count }, (_, index) => getPlaceholderId(parentId, index));
+exports.getChildrenPlaceholderIds = getChildrenPlaceholderIds;
+/**
+ * Какую заглушку должна показывать ветка при текущем состоянии загрузки
+ * дочерних элементов.
+ */
+const resolveChildrenPlaceholderKind = (isLoading, isError, isNoData, realChildren) => {
+    if (isLoading) {
+        return realChildren ? 'spinner' : 'skeleton';
+    }
+    if (isError) {
+        return 'error';
+    }
+    if (isNoData && !realChildren) {
+        return 'no-data';
+    }
+    return undefined;
+};
+const getPlaceholderCount = (kind, skeletonCount) => {
+    if (!kind) {
+        return 0;
+    }
+    return kind === 'skeleton' ? skeletonCount : 1;
+};
+/**
+ * Создаёт строку-заглушку ветки
+ */
+const createChildrenPlaceholder = (parent, { kind, index, siblingIndex, }) => {
+    const id = kind === 'no-data'
+        ? getNoDataId(parent.id)
+        : getPlaceholderId(parent.id, index);
+    return {
+        id,
+        placeholderKind: kind,
+        meta: {
+            hasNested: false,
+            isChildrenAsync: false,
+            level: parent.meta.level + 1,
+            path: [...parent.meta.path, id],
+            isExpanded: false,
+            parentId: parent.id,
+            siblingIndex,
+            nodeId: `infinite-tree-item-${id}`,
+        },
+    };
+};
+/**
+ * Приводит строки-заглушки ветки родителя к состоянию загрузки её дочерних
+ * элементов:
+ * ставит нужный вид заглушки, меняет его или убирает заглушки совсем
+ */
+const syncChildrenPlaceholders = (flatList, parentId, isLoading, skeletonCount, isError, isNoData) => {
+    const parentIndex = flatList.findIndex((item) => item.id === parentId);
+    if (parentIndex === -1) {
+        return flatList;
+    }
+    const parent = flatList[parentIndex];
+    const existingPlaceholders = flatList.filter((item) => (0, checkIsChildrenPlaceholderOf_1.checkIsChildrenPlaceholderOf)(item, parentId));
+    const realChildren = flatList.some((item) => (0, checkIsDirectChild_1.checkIsDirectChild)(item, parentId));
+    const kind = resolveChildrenPlaceholderKind(isLoading, Boolean(isError), Boolean(isNoData), realChildren);
+    const desiredCount = getPlaceholderCount(kind, skeletonCount);
+    const samePlaceholders = existingPlaceholders.length === desiredCount &&
+        existingPlaceholders.every((item) => item.placeholderKind === kind);
+    if (samePlaceholders) {
+        return flatList;
+    }
+    const withoutPlaceholders = flatList.filter((item) => !(0, checkIsChildrenPlaceholderOf_1.checkIsChildrenPlaceholderOf)(item, parentId));
+    if (!kind) {
+        return withoutPlaceholders;
+    }
+    const nextParentIndex = withoutPlaceholders.findIndex((item) => item.id === parentId);
+    const nestedItems = (0, getNestedItems_1.getNestedItems)(withoutPlaceholders, parentId);
+    const insertIndex = nextParentIndex + 1 + nestedItems.length;
+    const realDirectCount = (0, countDirectChildren_1.countDirectChildren)(withoutPlaceholders, parentId);
+    const placeholders = Array.from({ length: desiredCount }, (_, index) => createChildrenPlaceholder(parent, {
+        kind,
+        index,
+        siblingIndex: realDirectCount + index,
+    }));
+    return [
+        ...withoutPlaceholders.slice(0, insertIndex),
+        ...placeholders,
+        ...withoutPlaceholders.slice(insertIndex),
+    ];
+};
+exports.syncChildrenPlaceholders = syncChildrenPlaceholders;

package/node/components/MenuOrganization/NoData/styles.js

@@ -10,7 +10,7 @@ exports.Wrapper = styled_1.styled.div `
 
   height: ${constants_1.PLACEHOLDER_HEIGHT};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     height: 100%;
   }
 `;

package/node/components/MenuOrganization/OrganizationButton/styles.js

@@ -26,7 +26,7 @@ exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
     background-color: ${({ theme }) => theme.palette.primary[100]};
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     justify-content: space-between;
 
     width: 100%;

package/node/components/MenuOrganization/OrganizationItem/styles.js

@@ -11,7 +11,7 @@ exports.StyledMenuItem = (0, styled_1.styled)(MenuItem_2.MenuItem) `
 
   padding: ${({ theme }) => theme.microSpacing(3, 6)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     padding: ${({ theme }) => theme.microSpacing(5, 6)};
 
     &.${MenuItem_1.menuItemClasses.selected} {

package/node/components/MenuOrganization/OrganizationListSkeleton/styles.js

@@ -10,7 +10,7 @@ exports.Item = styled_1.styled.div `
   width: 100%;
   padding: ${({ theme }) => theme.spacing(0, 2)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     gap: ${({ theme }) => theme.spacing(3)};
 
     padding: ${({ theme }) => theme.spacing(3)};
@@ -25,7 +25,7 @@ exports.Wrapper = styled_1.styled.div `
   width: 100%;
   padding: ${({ theme }) => theme.microSpacing(5, 0)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     gap: ${({ theme }) => theme.spacing(2)};
 
     padding: 0;

package/node/components/MenuOrganization/styles.js

@@ -15,7 +15,7 @@ exports.ActionWrapper = styled_1.styled.div `
 
   border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     padding: ${({ theme }) => theme.spacing(4)};
   }
 `;
@@ -25,7 +25,7 @@ exports.SearchWrapper = styled_1.styled.div `
 
   border-bottom: ${({ theme }) => `1px solid ${theme.palette.components.border.default}`};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     max-width: unset;
     padding: ${({ theme }) => theme.spacing(3, 4)};
   }
@@ -48,7 +48,7 @@ exports.OrganizationsWrapper = styled_1.styled.div `
     height: ${constants_2.PLACEHOLDER_HEIGHT};
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     width: 100%;
     height: 100%;
     max-height: unset;
@@ -84,7 +84,7 @@ exports.StyledTypography = (0, styled_1.styled)(Typography_1.Typography) `
 `;
 exports.StyledPopover = (0, styled_1.styled)(Popover_1.Popover) `
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     & .${BottomDrawer_1.bottomDrawerClassnames.content} {
       display: flex;
       flex-direction: column;

package/node/components/MinimalisticPagination/styles.js

@@ -24,7 +24,7 @@ exports.PaginationWrapper = styled_1.styled.nav `
     opacity: 0.3;
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
     justify-content: flex-end;
 
     width: 100%;