@astral/ui 4.100.0 → 4.102.0

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

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

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

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

package/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/components/InfiniteTreeList/{useLogic/utils → utils}/getInitialExpandedIds/getInitialExpandedIds.js

@@ -1,19 +1,20 @@
 /**
- * Получает начальный набор раскрытых узлов
+ * Получает начальный набор раскрытых узлов.
+ * Узел с подгружаемыми дочерними элементами раскрывается наравне
+ * со статической веткой
  */
 export 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 = getInitialExpandedIds(prev, item.children, initialExpandedLevel, currentLevel + 1);
                 childExpandedIds.forEach((id) => expandedIds.add(id));

package/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/components/InfiniteTreeList/utils/getNestedItems/getNestedItems.js

@@ -0,0 +1,18 @@
+/**
+ * Собирает вложенные строки узла из плоского списка.
+ * Свёрнутых веток в списке нет
+ */
+export 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;
+};

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

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

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

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

package/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/components/InfiniteTreeList/utils/index.js

@@ -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/components/InfiniteTreeList/utils/insertChildren/index.d.ts

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

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

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

package/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/components/InfiniteTreeList/utils/insertChildren/insertChildren.js

@@ -0,0 +1,41 @@
+import { checkIsDirectChild } from '../checkIsDirectChild';
+import { flattenChildren } from '../flattenChildren';
+import { getNestedItems } from '../getNestedItems';
+/**
+ * Возвращает прямых дочерних элементов родителя из плоского списка
+ */
+const getDirectChildren = (flatList, parentId) => flatList.filter((item) => checkIsDirectChild(item, parentId));
+/**
+ * Вставляет дочерние элементы после родителя в плоский список.
+ */
+export 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 = 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 = 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(...getNestedItems(flatList, child.id));
+        }
+    });
+    const branchEnd = parentIndex + 1 + nestedItems.length;
+    return [
+        ...flatList.slice(0, parentIndex),
+        { ...parent, children: childrenData },
+        ...nextBranch,
+        ...flatList.slice(branchEnd),
+    ];
+};

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

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

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

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

package/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/components/InfiniteTreeList/utils/removeChildren/removeChildren.js

@@ -0,0 +1,12 @@
+import { getNestedItems } from '../getNestedItems';
+/**
+ * Удаляет дочерние элементы родителя из плоского списка и сворачивает родителя
+ */
+export const removeChildren = (flatList, parentId) => {
+    const descendantIds = new Set(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);
+};

package/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/components/InfiniteTreeList/{useLogic/utils → utils}/sortCollapsed/sortCollapsed.js

@@ -1,10 +1,5 @@
 /**
- * Сортирует элементы для корректной последовательности анимации при сворачивании.
- * Сначала более глубокие уровни, затем по индексу среди соседей.
- *
- * @typeParam T - тип данных элемента дерева
- * @param items - элементы в формате `FlattenTree<T>`
- * @returns Отсортированный массив `FlattenTree<T>`
+ * Сортирует элементы для корректной последовательности анимации при сворачивании
  */
 export const sortCollapsed = (items) => {
     return [...items].sort((a, b) => {

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { infiniteTreeListClassnames } from '../../constants';
+export const startRemoveAnimation = (nodeId) => {
+    const treeItem = document.getElementById(nodeId);
+    treeItem?.classList.add(infiniteTreeListClassnames.rowRemoveAnimation);
+};

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

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

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

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

package/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/components/InfiniteTreeList/utils/syncChildrenPlaceholders/syncChildrenPlaceholders.js

@@ -0,0 +1,99 @@
+import { checkIsChildrenPlaceholderOf } from '../checkIsChildrenPlaceholderOf';
+import { checkIsDirectChild } from '../checkIsDirectChild';
+import { countDirectChildren } from '../countDirectChildren';
+import { getNestedItems } from '../getNestedItems';
+/**
+ * Возвращает стабильный id строки-заглушки для родителя.
+ */
+const getPlaceholderId = (parentId, index) => `loader-${parentId}-${index}`;
+/**
+ * Возвращает стабильный id строки-заглушки «Нет данных».
+ */
+const getNoDataId = (parentId) => `no-data-${parentId}`;
+/**
+ * Возвращает id строк-заглушек, которые получит родитель.
+ */
+export const getChildrenPlaceholderIds = (parentId, count) => Array.from({ length: count }, (_, index) => getPlaceholderId(parentId, index));
+/**
+ * Какую заглушку должна показывать ветка при текущем состоянии загрузки
+ * дочерних элементов.
+ */
+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}`,
+        },
+    };
+};
+/**
+ * Приводит строки-заглушки ветки родителя к состоянию загрузки её дочерних
+ * элементов:
+ * ставит нужный вид заглушки, меняет его или убирает заглушки совсем
+ */
+export 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) => checkIsChildrenPlaceholderOf(item, parentId));
+    const realChildren = flatList.some((item) => 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) => !checkIsChildrenPlaceholderOf(item, parentId));
+    if (!kind) {
+        return withoutPlaceholders;
+    }
+    const nextParentIndex = withoutPlaceholders.findIndex((item) => item.id === parentId);
+    const nestedItems = getNestedItems(withoutPlaceholders, parentId);
+    const insertIndex = nextParentIndex + 1 + nestedItems.length;
+    const realDirectCount = 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),
+    ];
+};

package/components/InputGroup/styles.js

@@ -1,5 +1,6 @@
 import { formControlClasses } from '@mui/material/FormControl';
 import { inputBaseClasses } from '@mui/material/InputBase';
+import { HOVER_MEDIA } from '../constants';
 import { styled } from '../styled';
 export const InputsWrapper = styled.fieldset `
   display: grid;
@@ -76,11 +77,13 @@ export const InputsWrapper = styled.fieldset `
     width: auto;
     margin-right: -2px;
     
-    &:hover {
-      z-index: 3;
-      
-      &.${inputBaseClasses.disabled} {
-        z-index: 1;
+    ${HOVER_MEDIA} {
+      &:hover {
+        z-index: 3;
+
+        &.${inputBaseClasses.disabled} {
+          z-index: 1;
+        }
       }
     }
   }

package/components/JsonViewer/JsonNode/styles.js

@@ -1,4 +1,5 @@
 import { ChevronROutlineMd } from '../../../icons/ChevronROutlineMd';
+import { HOVER_MEDIA } from '../../constants';
 import { styled } from '../../styled';
 export const NodeContainer = styled('dl', {
     shouldForwardProp: (prop) => prop !== 'level' && prop !== 'isExpandable',
@@ -21,8 +22,10 @@ export const NodeContainer = styled('dl', {
     duration: theme.transitions.duration.shortest,
 })};
 
-  &:hover {
-    background-color: ${({ theme, isExpandable }) => isExpandable ? theme.palette.background.elementHover : 'transparent'};
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme, isExpandable }) => isExpandable ? theme.palette.background.elementHover : 'transparent'};
+    }
   }
 `;
 export const IconWrapper = styled('div', {

package/components/Link/styles.js

@@ -1,4 +1,5 @@
 import Link from '@mui/material/Link';
+import { HOVER_MEDIA } from '../constants';
 import { svgIconClassnames } from '../SvgIcon';
 import { styled } from '../styled';
 import { linkClassnames } from './constants';
@@ -16,9 +17,11 @@ export const StyledLink = styled(Link) `
     color: ${({ theme }) => theme.palette.components.link.visited};
   }
 
-  &:hover {
-    color: ${({ theme }) => theme.palette.components.link.hover};
-    text-decoration: underline;
+  ${HOVER_MEDIA} {
+    &:hover {
+      color: ${({ theme }) => theme.palette.components.link.hover};
+      text-decoration: underline;
+    }
   }
 
   &:active {
@@ -32,10 +35,12 @@ export const StyledLink = styled(Link) `
       color: ${({ theme }) => theme.palette.components.link.contrast.visited};
     }
 
-    &:hover {
-      color: ${({ theme }) => theme.palette.components.link.contrast.hover};
+    ${HOVER_MEDIA} {
+      &:hover {
+        color: ${({ theme }) => theme.palette.components.link.contrast.hover};
+      }
     }
-    
+
     &:active {
       color: ${({ theme }) => theme.palette.components.link.contrast.active};
     }

package/components/ListItem/styles.js

@@ -1,4 +1,5 @@
 import ListItem from '@mui/material/ListItem';
+import { HOVER_MEDIA } from '../constants';
 import { styled } from '../styled';
 import { ListItemStates } from './constants';
 export const getBgColor = ({ selected, theme, }) => {
@@ -32,10 +33,12 @@ export const StyledListItem = styled(ListItem, {
   background-color: ${(props) => getBgColor({ ...props })};
   border-radius: ${({ theme }) => theme.shape.small};
 
-  :hover {
-    color: ${(props) => getColor({
+  ${HOVER_MEDIA} {
+    :hover {
+      color: ${(props) => getColor({
     ...props,
     listItemState: ListItemStates.Hover,
 })};
+    }
   }
 `;

package/components/MenuOrganization/OrganizationButton/styles.js

@@ -1,5 +1,6 @@
 import { Button } from '../../Button';
 import { Chevron } from '../../Chevron';
+import { HOVER_MEDIA } from '../../constants';
 import { styled } from '../../styled/styled';
 import { Typography } from '../../Typography';
 export const StyledButton = styled(Button) `
@@ -13,8 +14,10 @@ export const StyledButton = styled(Button) `
 
   text-align: left;
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
+    }
   }
 
   &:active {
@@ -32,10 +35,6 @@ export const StyledButton = styled(Button) `
 
     border-radius: 0;
 
-    &:hover {
-      background-color: initial;
-    }
-
     &:active {
       background-color: ${({ theme }) => theme.palette.primary[100]};
     }

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

@@ -1,6 +1,7 @@
 import { listItemButtonClasses } from '@mui/material/ListItemButton';
 import { ChevronDOutlineMd } from '../../../../icons/ChevronDOutlineMd';
 import { PageDotOutlineMd } from '../../../../icons/PageDotOutlineMd';
+import { HOVER_MEDIA } from '../../../constants';
 import { ListItemButton } from '../../../ListItemButton';
 import { ListItemIcon } from '../../../ListItemIcon';
 import { OverflowTypography } from '../../../OverflowTypography';
@@ -33,23 +34,29 @@ export const StyledListItemButton = styled(ListItemButton) `
       border-left: 3px solid ${({ theme }) => theme.palette.primary[800]};
     }
     
-    &:hover {
-      background-color: ${({ theme }) => theme.palette.primary[100]};
+    ${HOVER_MEDIA} {
+      &:hover {
+        background-color: ${({ theme }) => theme.palette.primary[100]};
+      }
     }
 
     &.${navMenuItemButtonClassnames.hasGroup} {
       background-color: inherit;
 
-      &:hover {
-        background-color: inherit;
+      ${HOVER_MEDIA} {
+        &:hover {
+          background-color: inherit;
+        }
       }
     }
   }
 
-  &:hover {
-    color: ${({ theme }) => theme.palette.primary['800']};
+  ${HOVER_MEDIA} {
+    &:hover {
+      color: ${({ theme }) => theme.palette.primary['800']};
 
-    background-color: inherit;
+      background-color: inherit;
+    }
   }
 
   &:active {

package/components/NewStepper/Step/styles.js

@@ -1,5 +1,6 @@
 import { NextOutlineMd } from '../../../icons/NextOutlineMd';
 import { Button } from '../../Button';
+import { HOVER_MEDIA } from '../../constants';
 import { styled } from '../../styled';
 import { typographyClassnames } from '../../Typography/constants';
 import { STEPPER_ORDER_COUNTER_NAME } from '../constants';
@@ -271,26 +272,28 @@ export const StyledButton = styled(Button) `
     height: auto;
   }
 
-  &:hover {
-    background: transparent;
+  ${HOVER_MEDIA} {
+    &:hover {
+      background: transparent;
 
-    & .${stepClassnames.label} {
-      color: ${({ theme }) => theme.palette.grey[700]};
-    }
+      & .${stepClassnames.label} {
+        color: ${({ theme }) => theme.palette.grey[700]};
+      }
 
-    & .${stepIconClassnames.root} {
-      color: ${({ theme }) => theme.palette.primary[700]};
+      & .${stepIconClassnames.root} {
+        color: ${({ theme }) => theme.palette.primary[700]};
 
-      &.${stepIconClassnames.success} {
-        color: ${({ theme }) => theme.palette.success[700]};
-      }
+        &.${stepIconClassnames.success} {
+          color: ${({ theme }) => theme.palette.success[700]};
+        }
 
-      &.${stepIconClassnames.error} {
-        color: ${({ theme }) => theme.palette.error[700]};
-      }
+        &.${stepIconClassnames.error} {
+          color: ${({ theme }) => theme.palette.error[700]};
+        }
 
-      &.${stepIconClassnames.warning} {
-        color: ${({ theme }) => theme.palette.warning[700]};
+        &.${stepIconClassnames.warning} {
+          color: ${({ theme }) => theme.palette.warning[700]};
+        }
       }
     }
   }

package/components/Notification/NotificationStackContainer/styles.js

@@ -1,5 +1,6 @@
 import { ToastContainer } from 'react-toastify-next';
 import { Button } from '../../Button';
+import { HOVER_MEDIA } from '../../constants';
 import { keyframes, styled } from '../../styled';
 import { NOTIFY_HEIGHT, NOTIFY_HEIGHT_MOBILE, NOTIFY_NO_TRANSITION_ATTR, NotificationVariantTypes, notifyClassnames, } from '../constants';
 const fade = keyframes `
@@ -485,8 +486,10 @@ export const CloseButton = styled(Button) `
 
   animation: ${fade} 500ms linear;
 
-  &:hover {
-    box-shadow: ${({ theme }) => theme.elevation[300]};
+  ${HOVER_MEDIA} {
+    &:hover {
+      box-shadow: ${({ theme }) => theme.elevation[300]};
+    }
   }
 
   &.${notifyClassnames.closeButtonAnimationOut} {

package/components/PageAsideNavigation/PageAsideNavigationItem/styles.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA } from '../../constants';
 import { svgIconClassnames } from '../../SvgIcon/constants';
 import { styled } from '../../styled';
 import { pageAsideNavigationItemClassnames } from './constants';
@@ -33,8 +34,10 @@ export const Wrapper = styled.li `
       color: ${({ theme }) => theme.palette.grey[800]};
     }
 
-    &:hover {
-      color: ${({ theme }) => theme.palette.primary[800]};
+    ${HOVER_MEDIA} {
+      &:hover {
+        color: ${({ theme }) => theme.palette.primary[800]};
+      }
     }
 
     &:active {
@@ -73,10 +76,6 @@ export const Wrapper = styled.li `
       transition: ${({ theme }) => theme.transitions.create(['border-color', 'background-color'], {
     duration: theme.transitions.duration.shortest,
 })};
-      
-      &:hover {
-        color: ${({ theme }) => theme.palette.grey[800]};
-      }
 
       &:active {
         color: ${({ theme }) => theme.palette.grey[800]};