@astral/ui 4.100.0 → 4.102.0

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/InputGroup/styles.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputsWrapper = void 0;
 const FormControl_1 = require("@mui/material/FormControl");
 const InputBase_1 = require("@mui/material/InputBase");
+const constants_1 = require("../constants");
 const styled_1 = require("../styled");
 exports.InputsWrapper = styled_1.styled.fieldset `
   display: grid;
@@ -79,11 +80,13 @@ exports.InputsWrapper = styled_1.styled.fieldset `
     width: auto;
     margin-right: -2px;
     
-    &:hover {
-      z-index: 3;
-      
-      &.${InputBase_1.inputBaseClasses.disabled} {
-        z-index: 1;
+    ${constants_1.HOVER_MEDIA} {
+      &:hover {
+        z-index: 3;
+
+        &.${InputBase_1.inputBaseClasses.disabled} {
+          z-index: 1;
+        }
       }
     }
   }

package/node/components/JsonViewer/JsonNode/styles.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chevron = exports.IconWrapper = exports.NodeContainer = void 0;
 const ChevronROutlineMd_1 = require("../../../icons/ChevronROutlineMd");
+const constants_1 = require("../../constants");
 const styled_1 = require("../../styled");
 exports.NodeContainer = (0, styled_1.styled)('dl', {
     shouldForwardProp: (prop) => prop !== 'level' && prop !== 'isExpandable',
@@ -24,8 +25,10 @@ exports.NodeContainer = (0, styled_1.styled)('dl', {
     duration: theme.transitions.duration.shortest,
 })};
 
-  &:hover {
-    background-color: ${({ theme, isExpandable }) => isExpandable ? theme.palette.background.elementHover : 'transparent'};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme, isExpandable }) => isExpandable ? theme.palette.background.elementHover : 'transparent'};
+    }
   }
 `;
 exports.IconWrapper = (0, styled_1.styled)('div', {

package/node/components/Link/styles.js

@@ -5,9 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledLink = void 0;
 const Link_1 = __importDefault(require("@mui/material/Link"));
+const constants_1 = require("../constants");
 const SvgIcon_1 = require("../SvgIcon");
 const styled_1 = require("../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.StyledLink = (0, styled_1.styled)(Link_1.default) `
   display: inline-flex;
   gap: ${({ theme }) => theme.spacing(1)};
@@ -22,26 +23,30 @@ exports.StyledLink = (0, styled_1.styled)(Link_1.default) `
     color: ${({ theme }) => theme.palette.components.link.visited};
   }
 
-  &:hover {
-    color: ${({ theme }) => theme.palette.components.link.hover};
-    text-decoration: underline;
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      color: ${({ theme }) => theme.palette.components.link.hover};
+      text-decoration: underline;
+    }
   }
 
   &:active {
     color: ${({ theme }) => theme.palette.components.link.active};
   }
 
-  &.${constants_1.linkClassnames.isContrast} {
+  &.${constants_2.linkClassnames.isContrast} {
     color: ${({ theme }) => theme.palette.components.link.contrast.main};
 
     &:visited {
       color: ${({ theme }) => theme.palette.components.link.contrast.visited};
     }
 
-    &:hover {
-      color: ${({ theme }) => theme.palette.components.link.contrast.hover};
+    ${constants_1.HOVER_MEDIA} {
+      &:hover {
+        color: ${({ theme }) => theme.palette.components.link.contrast.hover};
+      }
     }
-    
+
     &:active {
       color: ${({ theme }) => theme.palette.components.link.contrast.active};
     }

package/node/components/ListItem/styles.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledListItem = exports.getColor = exports.getBgColor = void 0;
 const ListItem_1 = __importDefault(require("@mui/material/ListItem"));
+const constants_1 = require("../constants");
 const styled_1 = require("../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 const getBgColor = ({ selected, theme, }) => {
     if (selected) {
         return theme.palette.grey[200];
@@ -18,10 +19,10 @@ const getColor = ({ theme, selected, listItemState, }) => {
     if (selected) {
         return theme.palette.primary[800];
     }
-    if (listItemState === constants_1.ListItemStates.Default) {
+    if (listItemState === constants_2.ListItemStates.Default) {
         return theme.palette.grey[900];
     }
-    if (listItemState === constants_1.ListItemStates.Hover) {
+    if (listItemState === constants_2.ListItemStates.Hover) {
         return theme.palette.primary[800];
     }
     return theme.palette.grey[900];
@@ -35,15 +36,17 @@ exports.StyledListItem = (0, styled_1.styled)(ListItem_1.default, {
 
   padding-left: ${({ theme }) => theme.spacing(3)};
 
-  color: ${(props) => (0, exports.getColor)({ ...props, listItemState: constants_1.ListItemStates.Default })};
+  color: ${(props) => (0, exports.getColor)({ ...props, listItemState: constants_2.ListItemStates.Default })};
 
   background-color: ${(props) => (0, exports.getBgColor)({ ...props })};
   border-radius: ${({ theme }) => theme.shape.small};
 
-  :hover {
-    color: ${(props) => (0, exports.getColor)({
+  ${constants_1.HOVER_MEDIA} {
+    :hover {
+      color: ${(props) => (0, exports.getColor)({
     ...props,
-    listItemState: constants_1.ListItemStates.Hover,
+    listItemState: constants_2.ListItemStates.Hover,
 })};
+    }
   }
 `;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledTypography = exports.Container = exports.StyledChevron = exports.StyledButton = void 0;
 const Button_1 = require("../../Button");
 const Chevron_1 = require("../../Chevron");
+const constants_1 = require("../../constants");
 const styled_1 = require("../../styled/styled");
 const Typography_1 = require("../../Typography");
 exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
@@ -16,8 +17,10 @@ exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
 
   text-align: left;
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
+    }
   }
 
   &:active {
@@ -35,10 +38,6 @@ exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
 
     border-radius: 0;
 
-    &:hover {
-      background-color: initial;
-    }
-
     &:active {
       background-color: ${({ theme }) => theme.palette.primary[100]};
     }

package/node/components/NavMenu/Item/ItemButton/styles.js

@@ -4,13 +4,14 @@ exports.StyledPageDotOutlineMd = exports.EndAdornmentWrapper = exports.NavMenuIt
 const ListItemButton_1 = require("@mui/material/ListItemButton");
 const ChevronDOutlineMd_1 = require("../../../../icons/ChevronDOutlineMd");
 const PageDotOutlineMd_1 = require("../../../../icons/PageDotOutlineMd");
+const constants_1 = require("../../../constants");
 const ListItemButton_2 = require("../../../ListItemButton");
 const ListItemIcon_1 = require("../../../ListItemIcon");
 const OverflowTypography_1 = require("../../../OverflowTypography");
 const SvgIcon_1 = require("../../../SvgIcon");
 const styled_1 = require("../../../styled");
 const mixins_1 = require("../../../styled/mixins");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.StyledListItemButton = (0, styled_1.styled)(ListItemButton_2.ListItemButton) `
   overflow: hidden;
 
@@ -36,23 +37,29 @@ exports.StyledListItemButton = (0, styled_1.styled)(ListItemButton_2.ListItemBut
       border-left: 3px solid ${({ theme }) => theme.palette.primary[800]};
     }
     
-    &:hover {
-      background-color: ${({ theme }) => theme.palette.primary[100]};
+    ${constants_1.HOVER_MEDIA} {
+      &:hover {
+        background-color: ${({ theme }) => theme.palette.primary[100]};
+      }
     }
 
-    &.${constants_1.navMenuItemButtonClassnames.hasGroup} {
+    &.${constants_2.navMenuItemButtonClassnames.hasGroup} {
       background-color: inherit;
 
-      &:hover {
-        background-color: inherit;
+      ${constants_1.HOVER_MEDIA} {
+        &:hover {
+          background-color: inherit;
+        }
       }
     }
   }
 
-  &:hover {
-    color: ${({ theme }) => theme.palette.primary['800']};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      color: ${({ theme }) => theme.palette.primary['800']};
 
-    background-color: inherit;
+      background-color: inherit;
+    }
   }
 
   &:active {