@astral/ui 4.100.0 → 4.102.0

package/components/Alert/styles.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA } from '../constants';
 import { Grid } from '../Grid';
 import { IconButton } from '../IconButton';
 import { svgIconClassnames } from '../SvgIcon';
@@ -20,8 +21,17 @@ export const StyledIconButton = styled(IconButton) `
     margin-top: ${({ theme }) => `calc(${theme.microSpacing(3)} + (20px - 40px) / 2)`};
   }
 
-  &:hover {
-    background-color: rgb(0 0 0 / 4%);
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: rgb(0 0 0 / 4%);
+    }
+  }
+  
+  /* Переопределяем active на мобильных устройствах для сохранения исходной стилизации */
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    &:active {
+      background-color: rgb(0 0 0 / 4%);
+    }
   }
 `;
 export const Wrapper = styled.div `

package/components/Autocomplete/styles.js

@@ -2,6 +2,7 @@ import MuiAutocomplete, { autocompleteClasses, } from '@mui/material/Autocomplet
 import { formControlClasses } from '@mui/material/FormControl';
 import { iconButtonClasses } from '@mui/material/IconButton';
 import { inputBaseClasses } from '@mui/material/InputBase';
+import { HOVER_MEDIA } from '../constants';
 import { MenuItem } from '../MenuItem';
 import { svgIconClassnames } from '../SvgIcon';
 import { styled } from '../styled';
@@ -22,8 +23,10 @@ export const StyledAutocomplete = styled(MuiAutocomplete) `
       }`);
 }}
   
-  & .${autocompleteClasses.endAdornment} .${iconButtonClasses.root}:hover {
-      background-color: ${({ loading, theme }) => (loading ? 'transparent' : theme.palette.grey[100])};
+  ${HOVER_MEDIA} {
+    & .${autocompleteClasses.endAdornment} .${iconButtonClasses.root}:hover {
+        background-color: ${({ loading, theme }) => (loading ? 'transparent' : theme.palette.grey[100])};
+    }
   }
 
   &:not(.${autocompleteClassnames.emptyValue}) .${inputBaseClasses.root} {

package/components/Breadcrumbs/styles.js

@@ -1,6 +1,7 @@
 import Breadcrumbs from '@mui/material/Breadcrumbs';
 import { buttonBaseClasses } from '@mui/material/ButtonBase';
 import { linkClasses } from '@mui/material/Link';
+import { HOVER_MEDIA } from '../constants';
 import { styled } from '../styled';
 export const StyledBreadcrumbs = styled(Breadcrumbs) `
   .${buttonBaseClasses.root} {
@@ -14,22 +15,24 @@ export const StyledBreadcrumbs = styled(Breadcrumbs) `
       outline: 2px solid ${({ theme }) => theme.palette.components.focused};
     }
 
-    &:hover {
-      &::after {
-        content: '';
+    ${HOVER_MEDIA} {
+      &:hover {
+        &::after {
+          content: '';
 
-        position: absolute;
-        bottom: 3px;
-        left: ${({ theme }) => theme.microSpacing(3)};
+          position: absolute;
+          bottom: 3px;
+          left: ${({ theme }) => theme.microSpacing(3)};
 
-        width: ${({ theme }) => theme.spacing(3)};
-        height: 1px;
+          width: ${({ theme }) => theme.spacing(3)};
+          height: 1px;
 
-        background-color: currentColor;
+          background-color: currentColor;
+        }
       }
     }
   }
-  
+
   .MuiTypography-body1 {
     color: ${({ theme }) => theme.palette.primary[800]};
   }
@@ -40,9 +43,11 @@ export const StyledBreadcrumbs = styled(Breadcrumbs) `
     &:visited {
       color: ${({ theme }) => theme.palette.grey[700]};
     }
-    
-    &:hover {
-      color: ${({ theme }) => theme.palette.grey[800]};
+
+    ${HOVER_MEDIA} {
+      &:hover {
+        color: ${({ theme }) => theme.palette.grey[800]};
+      }
     }
   }
 `;

package/components/CheckableTag/styles.js

@@ -1,4 +1,5 @@
 import { badgeClasses } from '@mui/material/Badge';
+import { HOVER_MEDIA } from '../constants';
 import { styled } from '../styled';
 import { Tag, tagClassnames, } from '../Tag';
 const getHoverBgColor = ({ theme, color, isChecked, variant, disabled, }) => {
@@ -115,21 +116,23 @@ export const StyledTag = styled(Tag, {
     cursor: pointer;
   }
 
-  &:hover {
-    background-color: ${({ theme, color, variant, disabled, $isChecked }) => getHoverBgColor({
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme, color, variant, disabled, $isChecked }) => getHoverBgColor({
     theme,
     color,
     variant,
     disabled,
     isChecked: $isChecked,
 })};
-    border: ${({ theme, variant, $isChecked, color }) => getBorder({
+      border: ${({ theme, variant, $isChecked, color }) => getBorder({
     theme,
     variant,
     isChecked: $isChecked,
     tagState: 'hover',
     color,
 })};
+    }
   }
 
   &:active {

package/components/Checkbox/styles.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA } from '../constants';
 import { styled } from '../styled';
 import { easeOutBackTransition } from '../styled/mixins';
 import { CHECKBOX_SIZE, checkboxClassnames, MOBILE_CHECKBOX_SIZE, } from './constants';
@@ -59,17 +60,18 @@ export const Wrapper = styled('span', {
     opacity: ${({ $isIndeterminate }) => ($isIndeterminate ? 1 : 0)};
   }
 
-  &:hover {
-    .${checkboxClassnames.icon} {
-      color: ${({ $isError, theme }) => $isError ? theme.palette.error[700] : theme.palette.primary[700]};
-    }
+  ${HOVER_MEDIA} {
+    &:hover {
+      .${checkboxClassnames.icon} {
+        color: ${({ $isError, theme }) => $isError ? theme.palette.error[700] : theme.palette.primary[700]};
+      }
 
-    .${checkboxClassnames.outline} {
-      fill: ${({ theme, $isDisabled, $isChecked, $isIndeterminate }) => !$isDisabled &&
+      .${checkboxClassnames.outline} {
+        fill: ${({ theme, $isDisabled, $isChecked, $isIndeterminate }) => !$isDisabled &&
     !$isChecked &&
     !$isIndeterminate &&
     theme.palette.background.elementHover};
-      stroke: ${({ theme, $isDisabled, $isError, $isChecked, $isIndeterminate, }) => getOutlineColor({
+        stroke: ${({ theme, $isDisabled, $isError, $isChecked, $isIndeterminate, }) => getOutlineColor({
     theme,
     isHover: true,
     isDisabled: $isDisabled,
@@ -77,6 +79,7 @@ export const Wrapper = styled('span', {
     isChecked: $isChecked,
     isIndeterminate: $isIndeterminate,
 })};
+      }
     }
   }
 `;

package/components/Chip/styles.js

@@ -1,5 +1,6 @@
 import { badgeClasses } from '@mui/material/Badge';
 import { Counter } from '../Counter';
+import { HOVER_MEDIA } from '../constants';
 import { styled } from '../styled';
 import { Typography } from '../Typography';
 import { chipClassnames, chipSize } from './constants';
@@ -21,9 +22,11 @@ export const Wrapper = styled.div `
     duration: theme.transitions.duration.shortest,
 })};
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
-    border-color: ${({ theme }) => theme.palette.grey[400]};
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
+      border-color: ${({ theme }) => theme.palette.grey[400]};
+    }
   }
 
   &:active {
@@ -85,9 +88,11 @@ export const Wrapper = styled.div `
     background-color: ${({ theme }) => theme.palette.grey[100]};
     border-color: ${({ theme }) => theme.palette.grey[800]};
 
-    &:hover {
-      background-color: ${({ theme }) => theme.palette.background.elementHover};
-      border-color: ${({ theme }) => theme.palette.grey[800]};
+    ${HOVER_MEDIA} {
+      &:hover {
+        background-color: ${({ theme }) => theme.palette.background.elementHover};
+        border-color: ${({ theme }) => theme.palette.grey[800]};
+      }
     }
 
     &:active {

package/components/CodeField/styles.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA } from '../constants';
 import { FormHelperText as MuiFormHelperText } from '../FormHelperText';
 import { styled } from '../styled';
 import { Typography } from '../Typography';
@@ -48,10 +49,12 @@ export const Digit = styled.input `
   border-radius: ${({ theme }) => theme.shape.medium};
   outline: none;
 
-  &:hover {
-    background-color: ${({ theme, disabled }) => disabled
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme, disabled }) => disabled
     ? theme.palette.components.disabled
     : theme.palette.background.elementHover};
+    }
   }
 `;
 export const FieldLabel = styled(Typography) `

package/components/CopyTypography/styles.js

@@ -1,4 +1,5 @@
 import { CopyOutlineSm } from '../../icons/CopyOutlineSm';
+import { HOVER_MEDIA, HOVER_NONE_MEDIA } from '../constants';
 import { styled } from '../styled';
 import { Typography } from '../Typography';
 import { copyTypographyClassnames } from './constants';
@@ -9,12 +10,20 @@ export const Wrapper = styled(Typography) `
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
+
+  ${HOVER_MEDIA} {
+    &:hover {
+      text-decoration: underline;
+
+      .${copyTypographyClassnames.showIconOnHover} {
+        display: unset;
+      }
+    }
+  }
   
-  &:hover {
-    text-decoration: underline;
-    
-    .${copyTypographyClassnames.showIconOnHover} {
-      display: unset;
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    &:active {
+      text-decoration: underline;
     }
   }
 `;
@@ -34,5 +43,10 @@ export const StyledCopyIcon = styled(CopyOutlineSm, {
 
   &.${copyTypographyClassnames.showIconOnHover} {
     display: none;
+
+    /* На тач-устройствах иконка копирования недостижима наведением — показываем постоянно */
+    ${HOVER_NONE_MEDIA} {
+      display: unset;
+    }
   }
 `;

package/components/DashboardLayout/Header/styles.js

@@ -1,4 +1,5 @@
 import { buttonClasses } from '@mui/material/Button';
+import { HOVER_MEDIA } from '../../constants';
 import { dashboardLayoutNotificationListClassnames } from '../../DashboardLayoutNotificationList';
 import { IconButton } from '../../IconButton';
 import { menuOrganizationClassnames } from '../../MenuOrganization/constants';
@@ -184,8 +185,10 @@ export const PriorityFeatureWrapper = styled.div `
 
         border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
-        &:hover {
-          border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+        ${HOVER_MEDIA} {
+          &:hover {
+            border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+          }
         }
 
         &:active {

package/components/DashboardSidebarPopover/SidebarPopoverItem/styles.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA } from '../../constants';
 import { styled } from '../../styled';
 import { sidebarPopoverItemClassnames } from './constants';
 export const Item = styled.div `
@@ -14,8 +15,10 @@ export const Item = styled.div `
     });
 }};
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
+    }
   }
 
   &:active {

package/components/DataGrid/Row/styles.js

@@ -1,4 +1,5 @@
 import { ChevronROutlineMd } from '../../../icons/ChevronROutlineMd';
+import { HOVER_MEDIA } from '../../constants';
 import { IconButton } from '../../IconButton';
 import { styled } from '../../styled';
 import { Typography } from '../../Typography';
@@ -177,15 +178,17 @@ export const ContentWrapper = styled.div `
     background-color: ${({ theme }) => theme.palette.primary[100]};
   }
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
 
-    &.${dataGridRowContentClassnames.active} {
-      background-color: ${({ theme }) => theme.palette.primary[100]};
-    }
+      &.${dataGridRowContentClassnames.active} {
+        background-color: ${({ theme }) => theme.palette.primary[100]};
+      }
 
-    &.${dataGridRowContentClassnames.hovered} {
-      cursor: pointer;
+      &.${dataGridRowContentClassnames.hovered} {
+        cursor: pointer;
+      }
     }
   }
 
@@ -204,16 +207,6 @@ export const ContentWrapper = styled.div `
     &.${dataGridRowContentClassnames.active} {
       background-color: transparent;
     }
-
-    &:hover, &.${dataGridRowClassnames.hover} {
-      cursor: initial;
-
-      background-color: transparent;
-
-      &.${dataGridRowContentClassnames.active} {
-        background-color: transparent;
-      }
-    }
   }
 `;
 export const CellStyled = styled(Cell) `
@@ -246,8 +239,10 @@ export const CollapseButton = styled(IconButton) `
 
   color: inherit;
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.grey[300]};
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.grey[300]};
+    }
   }
 `;
 export const ChevronIcon = styled(ChevronROutlineMd, {

package/components/DataGrid/RowBase/styles.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA } from '../../constants';
 import { styled } from '../../styled';
 import { ROOT_ACTION_CELL_WIDTH } from '../constants';
 import { dataGridRowBaseClassnames } from './constants';
@@ -50,15 +51,17 @@ export const ContentWrapper = styled.div `
     background-color: ${({ theme }) => theme.palette.primary[100]};
   }
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
 
-    &.${dataGridRowBaseClassnames.active} {
-      background-color: ${({ theme }) => theme.palette.primary[100]};
-    }
+      &.${dataGridRowBaseClassnames.active} {
+        background-color: ${({ theme }) => theme.palette.primary[100]};
+      }
 
-    &.${dataGridRowBaseClassnames.hovered} {
-      cursor: pointer;
+      &.${dataGridRowBaseClassnames.hovered} {
+        cursor: pointer;
+      }
     }
   }
 
@@ -68,16 +71,6 @@ export const ContentWrapper = styled.div `
     &.${dataGridRowBaseClassnames.active} {
       background-color: transparent;
     }
-
-    &:hover, &.${dataGridRowBaseClassnames.hovered} {
-      cursor: initial;
-
-      background-color: transparent;
-
-      &.${dataGridRowBaseClassnames.active} {
-        background-color: transparent;
-      }
-    }
   }
 `;
 export const BottomDrawerContent = styled.div `

package/components/DataGridCollapsibleRow/styles.js

@@ -1,5 +1,6 @@
 import { ChevronROutlineMd } from '../../icons/ChevronROutlineMd';
 import { buttonClassnames } from '../Button';
+import { HOVER_MEDIA } from '../constants';
 import { ROOT_ACTION_CELL_WIDTH } from '../DataGrid/constants';
 import { dataGridRowBaseClassnames, RowBase } from '../DataGrid/RowBase';
 import { IconButton } from '../IconButton';
@@ -44,8 +45,10 @@ export const CollapseButton = styled(IconButton) `
 
   color: inherit;
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.grey[300]};
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.grey[300]};
+    }
   }
 `;
 export const CollapseCell = styled.div `

package/components/Description/Value/styles.js

@@ -1,4 +1,5 @@
 import { CopyTypography } from '../../CopyTypography';
+import { HOVER_MEDIA } from '../../constants';
 import { styled } from '../../styled';
 import { Typography } from '../../Typography';
 export const StyledTypography = styled(Typography, {
@@ -16,8 +17,10 @@ export const StyledTypography = styled(Typography, {
     text-align: ${({ $direction }) => $direction !== 'row' ? 'left' : 'right'};
   }
 
-  &:hover {
-    text-decoration: ${({ $canCopy }) => ($canCopy ? 'underline' : 'none')};
+  ${HOVER_MEDIA} {
+    &:hover {
+      text-decoration: ${({ $canCopy }) => ($canCopy ? 'underline' : 'none')};
+    }
   }
 `;
 export const StyledCopyTypography = styled(CopyTypography, {

package/components/ExpansionPanel/Summary/styles.js

@@ -1,4 +1,5 @@
 import { Chevron } from '../../Chevron';
+import { HOVER_MEDIA } from '../../constants';
 import { styled } from '../../styled';
 const getBackgroundColor = (theme, isDisabled, isSelected) => {
     if (isDisabled) {
@@ -28,8 +29,10 @@ export const Wrapper = styled('summary', {
     duration: theme.transitions.duration.standard,
 })};
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
+    }
   }
 
   &:focus-visible {

package/components/Fab/styles.js

@@ -1,5 +1,6 @@
 import { buttonBaseClasses } from '@mui/material/ButtonBase';
 import Fab from '@mui/material/Fab';
+import { HOVER_MEDIA, HOVER_NONE_MEDIA } from '../constants';
 import { styled } from '../styled';
 import { FabColors, FabSizes, FabStates } from './enums';
 const getBgColor = ({ theme, color, fabState, }) => {
@@ -70,10 +71,18 @@ export const StyledFab = styled(Fab, {
   border-radius: ${({ theme, isSquare }) => isSquare ? theme.shape.medium : '50%'};
   box-shadow: ${({ theme }) => theme.elevation[200]};
 
-  :hover {
-    color: ${(props) => getColor({ ...props })};
+  ${HOVER_MEDIA} {
+    :hover {
+      color: ${(props) => getColor({ ...props })};
 
-    background: ${(props) => getBgColor({ ...props, fabState: FabStates.Hover })};
+      background: ${(props) => getBgColor({ ...props, fabState: FabStates.Hover })};
+    }
+  }
+  
+  ${HOVER_NONE_MEDIA} {
+    &:hover {
+      background-color: ${(props) => getBgColor({ ...props, fabState: FabStates.Default })};
+    }
   }
 
   :active {

package/components/InfiniteDataList/styles.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA } from '../constants';
 import { styled } from '../styled';
 import { infiniteDataListClassnames } from './constants';
 export const Item = styled.li `
@@ -15,8 +16,10 @@ export const Item = styled.li `
     duration: theme.transitions.duration.shortest,
 })};
 
-    &:hover {
-      background-color: ${({ theme }) => theme.palette.background.element};
+    ${HOVER_MEDIA} {
+      &:hover {
+        background-color: ${({ theme }) => theme.palette.background.element};
+      }
     }
 
     ${({ theme }) => theme.breakpoints.down('mobile')} {

package/components/InfiniteTreeList/InfiniteTreeList.d.ts

@@ -1,2 +1,20 @@
 import type { InfiniteTreeListData, InfiniteTreeListProps } from './types';
+/**
+ * Виртуализированное дерево с бесконечной подгрузкой
+ *
+ * @example
+ * <InfiniteTreeList
+ *   items={items}
+ *   scrollRef={scrollRef}
+ *   onRetry={refetch}
+ *   renderItem={(item) => (
+ *     <InfiniteTreeListItem>{item.name}</InfiniteTreeListItem>
+ *   )}
+ *   renderParent={(item) => (
+ *     <InfiniteTreeListItem childItems={childrenState[item.id]?.data}>
+ *       {item.name}
+ *     </InfiniteTreeListItem>
+ *   )}
+ * />
+ */
 export declare const InfiniteTreeList: <TData extends InfiniteTreeListData<TData>>(props: InfiniteTreeListProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/components/InfiniteTreeList/InfiniteTreeList.js

@@ -1,27 +1,34 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// cspell:ignore Виртуализированное
 import { Virtuoso } from 'react-virtuoso';
 import { ContentState } from '../ContentState';
-import { Loader } from '../Loader';
-import { OVERSCAN } from './constants';
-import { EndData } from './EndData';
-import { ErrorMessage } from './ErrorMessage';
-import { InfiniteTreeListContextProvider } from './InfiniteTreeListContext';
-import { TreeListItemContextProvider } from './InfiniteTreeListItem';
+import { InfiniteTreeListContextProvider, } from './InfiniteTreeListContext';
+import { ListFooter } from './ListFooter';
 import { NoDataPlaceholder } from './NoDataPlaceholder';
 import { OnTopButton } from './OnTopButton';
-import { Footer, FooterDummy } from './styles';
+import { ParentItems } from './ParentItems';
 import { TreeItem } from './TreeItem';
 import { useLogic } from './useLogic';
+const computeItemKey = (_, item) => item.id;
+/**
+ * Виртуализированное дерево с бесконечной подгрузкой
+ *
+ * @example
+ * <InfiniteTreeList
+ *   items={items}
+ *   scrollRef={scrollRef}
+ *   onRetry={refetch}
+ *   renderItem={(item) => (
+ *     <InfiniteTreeListItem>{item.name}</InfiniteTreeListItem>
+ *   )}
+ *   renderParent={(item) => (
+ *     <InfiniteTreeListItem childItems={childrenState[item.id]?.data}>
+ *       {item.name}
+ *     </InfiniteTreeListItem>
+ *   )}
+ * />
+ */
 export const InfiniteTreeList = (props) => {
-    const { flatList, onToggle, contentStateProps, scrollParent, virtuosoProps, footerProps, onTopButtonProps, endOfScrollMsg, renderItem, items, itemSkeleton, onRetry, onLoadMore, noDataImgSrc, recentlyExpandedIds, } = useLogic(props);
-    const renderItemContent = (_index, item) => (_jsx(TreeListItemContextProvider, { item: item, onToggle: onToggle, children: _jsx(TreeItem, { item: item, renderItem: renderItem, recentlyExpandedIds: recentlyExpandedIds }) }));
-    return (_jsx(InfiniteTreeListContextProvider, { itemSkeleton: itemSkeleton, children: _jsx(ContentState, { ...contentStateProps, children: items.length && scrollParent ? (_jsxs(_Fragment, { children: [_jsx(Virtuoso, { ...virtuosoProps, data: flatList, customScrollParent: scrollParent, endReached: onLoadMore, itemContent: renderItemContent, computeItemKey: (_, item) => item.id, components: {
-                            Footer: () => {
-                                const { isLoading, isError, isEndReached } = footerProps;
-                                if (!isLoading && !isError && !isEndReached) {
-                                    return _jsx(FooterDummy, {});
-                                }
-                                return (_jsxs(Footer, { children: [isLoading && _jsx(Loader, {}), isError && _jsx(ErrorMessage, { onRetry: onRetry }), isEndReached && (_jsx(EndData, { endOfScrollMsg: endOfScrollMsg }))] }));
-                            },
-                        }, overscan: OVERSCAN }), _jsx(OnTopButton, { ...onTopButtonProps })] })) : (_jsx(NoDataPlaceholder, { noDataImgSrc: noDataImgSrc })) }) }));
+    const { flatList, onToggle, contentStateProps, scrollParent, virtuosoProps, footerContext, onTopButtonProps, renderItem, renderParent, items, itemSkeleton, onRetry, noDataImgSrc, enterAnimation, tailRegistry, nodePaginationMap, registerChildren, notifyExpand, parentItems, acquireParentSlot, } = useLogic(props);
+    return (_jsxs(InfiniteTreeListContextProvider, { itemSkeleton: itemSkeleton, nodePaginationMap: nodePaginationMap, registerChildren: registerChildren, notifyExpand: notifyExpand, onListRetry: onRetry, enterAnimation: enterAnimation, tailRegistry: tailRegistry, renderItem: renderItem, renderParent: renderParent, onToggle: onToggle, acquireParentSlot: acquireParentSlot, children: [_jsx(ParentItems, { parents: parentItems }), _jsx(ContentState, { ...contentStateProps, children: items.length > 0 && scrollParent ? (_jsxs(_Fragment, { children: [_jsx(Virtuoso, { ...virtuosoProps, data: flatList, customScrollParent: scrollParent, computeItemKey: computeItemKey, context: footerContext, components: { Item: TreeItem, Footer: ListFooter } }), _jsx(OnTopButton, { ...onTopButtonProps })] })) : (_jsx(NoDataPlaceholder, { noDataImgSrc: noDataImgSrc })) })] }));
 };

package/components/InfiniteTreeList/InfiniteTreeListActions/InfiniteTreeListActions.d.ts

@@ -1,2 +1,11 @@
 import type { InfiniteTreeListActionProps } from './types';
+/**
+ * Действия строки дерева. Блокирующее действие в состоянии загрузки блокирует
+ * строку вместе со всей её веткой
+ *
+ * @example
+ * <InfiniteTreeListActions
+ *   actions={{ main: [{ name: 'Изменить', onClick: handleEdit }] }}
+ * />
+ */
 export declare const InfiniteTreeListActions: <TItem>({ actions, }: InfiniteTreeListActionProps<TItem>) => import("react/jsx-runtime").JSX.Element;

package/components/InfiniteTreeList/InfiniteTreeListActions/InfiniteTreeListActions.js

@@ -1,6 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ActionCellBase } from '../../ActionCellBase';
 import { useLogic } from './useLogic';
+/**
+ * Действия строки дерева. Блокирующее действие в состоянии загрузки блокирует
+ * строку вместе со всей её веткой
+ *
+ * @example
+ * <InfiniteTreeListActions
+ *   actions={{ main: [{ name: 'Изменить', onClick: handleEdit }] }}
+ * />
+ */
 export const InfiniteTreeListActions = ({ actions, }) => {
     const { isDisabledAction, handleWrapperClick, handleActionClick } = useLogic({
         actions,

package/components/InfiniteTreeList/InfiniteTreeListActions/types.d.ts

@@ -1,4 +1,9 @@
 import type { Actions } from '../../ActionCellBase';
 export type InfiniteTreeListActionProps<TItem> = {
+    /**
+     * Конфигурация действий строки
+     *
+     * @example actions={{ main: [{ name: 'Изменить', onClick: handleEdit }] }}
+     */
     actions: Actions<TItem>;
 };